JQuery:检测输入字段的更改

272

我希望能够检测用户键盘操作时改变文本框的值。它应该在现代浏览器中始终有效。

JQuery的.keypress事件页面上说它不一致?而且,它不能处理退格、删除等功能键。

我不能直接使用.keydown,因为它会响应shift、alt和箭头键等键。此外,当用户按住一个键并插入多个字符时,它不会触发多次。

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

作为奖励,它将检测由粘贴引起的更改(包括右键单击),但我从这里获得了解决方案。

5个回答

858
你可以将 'input' 事件绑定到文本框上。这将在每次输入更改时触发(每次),因此无论是使用右键粘贴、删除还是键入任何内容都会触发该事件。
$('#myTextbox').on('input', function() {
    // do something
});
如果您使用change事件处理程序,那么它只会在用户取消选中输入框后触发,这可能并不是您想要的。在此处有一个示例:http://jsfiddle.net/6bSX6/

281
在任天堂3DS浏览器中无法使用此功能。即使输入字段包含新字符串,也无法检测到更改。 - Johan
685
我很高兴我的雇主没有让我验证适用于Nintendo 3DS浏览器的Web代码。 - Shawn J. Molloy
2
这将无法处理在初始页面加载后生成的输入字段,例如流行的select2插件。 - Sliq
14
可以通过将代码更改为 $(document).on("input", "#myTextbox", function() {...}) 来解决该问题。这将对所有具有相同ID的动态生成输入元素触发事件。 - mojomex
@Timm,如果我使用Jquery设置输入框#myTextbox的值,例如$('#myTexbox').val('some_value'),这个方法是可行的吗?谢谢。 - Houy Narun

25

使用jQuery change事件

描述:将事件处理程序绑定到"change" JavaScript事件,或在元素上触发该事件。

一个示例

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

.change相较于.keypress, .focus, 和.blur具有的优势是,只有在输入内容发生改变时,.change事件才会被触发。


1
它能与下拉菜单一起使用吗? - jarvan

12

最近我使用以下函数实现了相同的功能。

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

  1. 不建议使用更改事件,因为它只会在编辑后,鼠标点击页面上的其他位置之前被触发。
  2. 按键事件无法处理删除、退格和粘贴选项。
  3. 按键抬起事件可以处理所有内容,包括制表符、Shift键等。

因此,我编写了以下函数,将按键事件、按键松开事件(用于退格、删除)和文本字段的粘贴事件组合在一起。

希望它能帮助你。

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();
    });


}

1
实际上,“keyup” 似乎是唯一一个(而不是“keypress”或“keydown”)可以检测到退格和删除操作的事件,至少在 IE 8 和 IE 9 中是如此。谢谢。 - Jason Frank

11
使用 $.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中的change事件在这里有文档记录:https://developer.mozilla.org/en-US/docs/Web/Events/change 以下是一个使用jQuery的输入元素上工作的change事件的实际示例:http://jsfiddle.net/p1m4xh08/

1
输入元素上没有“change”事件。 - Daniel
@Daniel 你错了 - 请参考 https://developer.mozilla.org/zh-CN/docs/Web/Events/change 和 https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/onchange - totallyNotLizards
抱歉,第二个链接错误 - 请查看此链接以获取更多信息:http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#event-input-change - totallyNotLizards
1
所以请再次阅读链接,你会看到:“与输入事件不同,更改事件并不一定会在每次更改元素的值时触发。” 这似乎是发布问题的人需要的。 - Daniel
你是正确的!我的“没有事件存在”的说法是不正确的;) - Daniel
显示剩余2条评论

3
您可以使用jQuery的change()函数。
$('input').change(function(){
  //your codes
});
在API页面上有如何使用它的示例:http://api.jquery.com/change/

2
文本字段的提示:只有在失去焦点时才能检测到。 - ChristoKiwi

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,