0

我对 Web 开发相当陌生，我想我已经掌握了窍门，我一直遇到的唯一主要问题是跨浏览器兼容性问题。

我在网页上有一个文本区域，它将在用户完成输入后调用一个函数。为了做到这一点，我使用 jQuery 和 setTimeout 在调用函数之前稍等片刻。这样可以确保在每次按键后都不会调用该函数。我不希望在每次按键后调用它，因为该函数向一个 servlet 发送一个请求，该 servlet 进行一些处理并返回。

该代码在 Chrome 上运行良好（我使用 Chrome 进行调试），但它不适用于 IE7。这里是：

var timer = null;
$("#scriptInput").keypress(function() {
    clearTimeout(timer);
    var thisEvent = window.event;
    timer = setTimeout(function() {validateScript(thisEvent);}, 500);           
});


function validateScript(evt) {
  var code = (evt.keyCode) ? evt.keyCode : evt.which;

  //check which key was pressed...
  //don't need to send a request on key presses of CAPSLOCK, SHIFT, and ARROW keys
  if(code != 20 && code != 16 && code != 37 && code != 38 && code != 39 && code !=40){ 
    sendRequest(2);
  }
}

如您所见，我已经多次尝试实现与 IE7 的兼容性，但无济于事：\

它必须至少与 IE7 兼容，因为它将被许多使用 IE7 并且没有升级权限的机器使用。

如果您需要更多信息，请告诉我！谢谢！

PS“scriptInput”是正在影响的文本区域的 id。

4

1 回答 1

3

var thisEvent = window.event;不跨浏览器兼容 - 并非所有浏览器都使用全局event对象，而是使用函数参数。

jQuery 总是为您提供一个事件对象作为函数参数，因此只需删除上述分配并更改您的代码，如下所示：

$("#scriptInput").keypress(function(thisEvent) {
    ...
});

jQuery 还将按键的各种属性标准化，e.which以便您可以摆脱var code = (evt.keyCode) ? evt.keyCode : evt.which;并简单地evt.which一直使用。

您还可以进一步改进/缩短整个事情。如果添加另一个库很好，我会使用_.debounceUnderscore.js 来进行计时：

$("#scriptInput").keypress(_.debounce(validateScript, 500));

除了 Underscore.js，您还可以使用提供该功能的 jQuery 插件。

如果添加额外的第三方代码不是一个选项，我会将计时器存储在元素上而不是（可能是全局的）变量上：

$("#scriptInput").keypress(function(e) {
    var $this = $(this);
    window.clearTimeout($this.data('timer'));
    $this.data('timer', window.setTimeout(function() {
        validateScript(e)
    }, 500));
});
于 2012-06-21T17:34:03.267 回答