Question

我是网络开发的新手，我想我已经掌握了它，我遇到的唯一主要问题是跨浏览器兼容性问题。

我在网页上有一个textarea，在用户输入完成后会调用一个函数。为了做到这一点，我在调用函数之前使用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并且没有升级权限的机器使用。

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

P.S。 “scriptInput”是影响的textarea的id。

Answer 1

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

jQuery总是为您提供一个事件对象作为函数参数，所以只需删除上面的赋值并更改您的代码：

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

jQuery还会将按下的键的各种属性规范化为e.which，这样您就可以摆脱var code = (evt.keyCode) ? evt.keyCode : evt.which;并始终只使用evt.which。

你还可以改善/缩短整个事情。如果添加另一个库很好，我会使用Underscore.js中的_.debounce进行计时：

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

您也可以使用jQuery plugin providing that functionality。

代替Underscore.js

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

$("#scriptInput").keypress(function(e) {
    var $this = $(this);
    window.clearTimeout($this.data('timer'));
    $this.data('timer', window.setTimeout(function() {
        validateScript(e)
    }, 500));
});

为接收事件的函数调用设置超时并不适用于IE7

1 个答案: