Question

我有一个按钮，当它点击时我会显示一些输入字段。输入字段本身跟踪键盘事件。

当我使用键盘单击按钮（将其对焦然后点击返回）时，输入字段会收到意外的键盘事件。

演示：http://jsfiddle.net/LpXGM/3/（只需点击返回并查看页面上的消息）

但是如果我添加一个超时，一切都按预期工作。演示：http://jsfiddle.net/8BRmK/1/（点击按钮返回时没有键盘事件）

为什么会发生这种奇怪的事情？我该如何解决？

带处理程序的代码

$button.on("click", function(){
    showModal();
});

$emailField.on("keyup", function(event) {
    // process the event
});

var showModal = function() {
    $modal.show();
    $emailField.focus();
}

Answer 1

没有timeOut的可能解决方案：http://jsfiddle.net/agudulin/3axBA/

$button.on("keypress", function(event){
  if (event.keyCode == 13) {
    return false;
  }
});

$button.on("keyup", function(event){
  if (event.keyCode == 13) {
    showModal();
    $status.append($("<span>enter has been pressed</span></br>"));
  }
});

Answer 2

尝试$button.on("keyup mouseup", function(){

或$emailField.on("keypress", function(event) {

Answer 3

试

$(document).ready(function(){
    $(document).on("click",".btn",function(e){
       $status.append($("<span>btn click</span></br>"));
    });
    $(document).on("keyup",".email",function(e){
        $status.append($("<span>keyup " + event.keyCode + "</span></br>"));
    });
  });

Answer 4

是的，之所以会发生这种情况，是因为您点击键盘而不是按钮点击事件首先触发，而不是根据您的逻辑，您的输入字段将获得焦点，并且您的keyup事件就会触发。但是当你给出Timeout时，click事件会先激活，但由于超时，你的逻辑会被延迟，而你的keyup事件已经完成了我们的工作，所以焦点不在你的输入中，而是为什么它没有在你的输入中输入任何单词。

单击链接时焦点输入中的键盘事件

4 个答案: