我想检测用户的键盘操作何时改变了文本字段的值。它应该在现代浏览器中始终如一地工作。

JQuery页面的.keypress事件说它不一致?此外,它不工作的退格,删除等。

我不能使用.keydown,因为它会对shift, alt和方向键等做出反应。此外,当用户按住一个键并插入多个字符时,它不会触发一次以上。

我是否遗漏了一个简洁的方法?或者我应该使用.keydown并过滤掉由方向键、shift等触发的事件?我主要担心的是会有一些我不知道应该过滤的键。(我几乎忘记了alt和ctrl,我想可能还有其他人)但然后我如何检测键被按住并插入多个字符?

作为奖励,它将检测由于粘贴(包括右键单击)的变化,但我有解决方案从这里。


当前回答

您可以将'input'事件绑定到文本框。这将在每次输入更改时触发,因此当您粘贴某些内容时(甚至使用右键单击),删除并键入任何内容。

$('#myTextbox').on('input', function() {
    // do something
});

如果使用更改处理程序,则只有在用户取消选择输入框之后才会触发此操作,而这可能不是您想要的结果。

这里有一个这两方面的例子:http://jsfiddle.net/6bSX6/

其他回答

可以使用jQuery的change()函数

$('input').change(function(){
  //your codes
});

在API Page上有关于如何使用它的示例:http://api.jquery.com/change/

相同的功能,我最近实现使用下面的功能。

我想在编辑时启用保存按钮。

更改事件是不可取的,因为它只会被触发,如果编辑后,鼠标在点击保存按钮之前点击页面上的其他地方。 按键不处理退格,删除和粘贴选项。 键Up处理所有内容,包括tab键,Shift键。

因此,我写了下面的功能组合按键,键up(退格,删除)和粘贴事件的文本字段。

希望对你有所帮助。

function checkAnyFormFieldEdited() {
    /*
     * If any field is edited,then only it will enable Save button
     */
    $(':text').keypress(function(e) { // text written
        enableSaveBtn();
    });

    $(':text').keyup(function(e) {
        if (e.keyCode == 8 || e.keyCode == 46) { //backspace and delete key
            enableSaveBtn();
        } else { // rest ignore
            e.preventDefault();
        }
    });
    $(':text').bind('paste', function(e) { // text pasted
        enableSaveBtn();
    });

    $('select').change(function(e) { // select element changed
        enableSaveBtn();
    });

    $(':radio').change(function(e) { // radio changed
        enableSaveBtn();
    });

    $(':password').keypress(function(e) { // password written
        enableSaveBtn();
    });
    $(':password').bind('paste', function(e) { // password pasted
        enableSaveBtn();
    });


}

使用$.on()将您选择的事件绑定到输入,不要使用像$.keydown()这样的快捷键,因为在jQuery 1.7中,$.on()是附加事件处理程序的首选方法(参见这里:http://api.jquery.com/on/和http://api.jquery.com/bind/)。

$.keydown()只是$.bind('keydown')的快捷方式,$.bind()是$.on()所取代的(以及其他)。

为了回答你的问题,据我所知,除非你需要在keydown上触发一个事件,否则change事件应该可以帮你。

$('element').on('change', function(){
    console.log('change');
});

为了响应下面的注释,javascript更改事件记录在这里:https://developer.mozilla.org/en-US/docs/Web/Events/change

下面是一个使用jQuery的change事件处理输入元素的工作示例:http://jsfiddle.net/p1m4xh08/

您可以将'input'事件绑定到文本框。这将在每次输入更改时触发,因此当您粘贴某些内容时(甚至使用右键单击),删除并键入任何内容。

$('#myTextbox').on('input', function() {
    // do something
});

如果使用更改处理程序,则只有在用户取消选择输入框之后才会触发此操作,而这可能不是您想要的结果。

这里有一个这两方面的例子:http://jsfiddle.net/6bSX6/

使用jquery改变事件

描述:绑定一个事件处理程序到“change”JavaScript事件, 或者在元素上触发该事件。

一个例子

$("input[type='text']").change( function() {
  // your code
});

.change相对于.keypress, .focus, .blur的优势在于。change事件只在输入发生变化时才会触发