jquery - 在返回键上未触发更改事件

Question

我有一个带有 jquery 更改事件的文本框。

$('#txtAccountNo').change(function(){
        $('label[for="txtAccountNo"]').append('<span class="support">loading...</span>')
    });

该事件在文本框失去焦点时起作用，即用户用鼠标单击它或使用 Tab 键。但是当按下返回键时，不会触发事件。有人可以帮我解决这个问题吗？

Answer 1

这是change事件的标准行为。如果要捕获每个Enter新闻，则需要使用该keypress事件：

$('#txtAccountNo').on('change keypress', function(e) {
  if (e.type == 'change' || (e.type == 'keypress' && e.which == 13)) {
    $('label[for="txtAccountNo"]').append('<span class="support">loading...</span>')
  }
});

Answer 2

正如您所强调的，change仅当文本输入失去焦点时才会触发该事件。您应该绑定到keyup：

$('#txtAccountNo').on('keyup', function() { 
    $('label[for="txtAccountNo"]').append('<span class="support">loading...</span>')
});

作为上述的后记，维护change事件可能是一个明智的主意，因为当有人将文本粘贴到文本框中时，您可能还想运行该功能。您可以使用以下方法做到这一点：

$('#txtAccountNo').on('keyup change', function() { ... });

Answer 3

实际上，在现代浏览器和高于 1.7 的 jQuery（问题中似乎正在使用它）中，返回按钮将提交更改而无需失去焦点，代码应该可以工作。

<input/><output/>
$("input").change( function() {
    $("output").val( $("input").val() );
})

在这里查看简单的测试：http: //jsfiddle.net/4vBSm/2/

这不会发生在 IE 9 及更低版本中。（并且 jQuery 不会修复http://bugs.jquery.com/ticket/11556）

Answer 4

正如 Matthew 的回答中所指出的，问题出现在 IE9 及更早版本中，但不在现代浏览器中。我建议以下解决方案，它只会将此功能添加到所有浏览器：

$('input[type=text]').on('keypress', function (e) {
    var $input = $(this);
    if (e.which == 13) { // Enter was hit
        $input.trigger('change');
    }
});

它监听文本输入上的按键，如果Enter被击中，它会触发一个更改事件。