JQuery:检测输入字段中的更改[重复]

问题描述 投票:213回答:5

我想检测用户的键盘操作何时更改了文本字段的值。它应该在现代浏览器中保持一致。

。keypress事件的JQuery页面说不一致吗?此外,它不适用于退格键,删除等。

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

我缺少一种简洁的方法吗?还是应该使用.keydown并过滤出箭头键,shift等触发的事件?我主要担心的是会有一些我不知道应该过滤的键。 (我几乎忘记了alt和ctrl,我想可能还有其他),但是那我将如何检测到按下的键并插入多个字符呢?

作为奖励,它可以检测到由于粘贴(包括右键单击)而引起的更改,但是我可以从here中找到解决方法。

jquery keypress
5个回答
674
投票

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

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

如果使用change处理程序,则仅在用户取消选择输入框(可能不是您想要的输入框)后才会触发。

这里有一个例子:http://jsfiddle.net/6bSX6/


13
投票

使用jquery change event

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

示例

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

.change具有优于.keypress.focus.blur的优点是.change事件仅会触发输入更改时


9
投票

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

我想在编辑时启用SAVE按钮。

  1. 不建议使用更改事件,因为只有在编辑后在单击保存按钮之前在页面上的其他位置单击鼠标,才会触发该事件。>>
  2. 按键不处理Backspace,Delete和Paste选项。
  3. [向上键]处理所有内容,包括制表符和Shift键。
  4. 因此,我在下面编写了将按键,击键(用于退格,删除)和文本字段的粘贴事件组合在一起的函数。

希望对您有帮助。

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


}

8
投票

使用$.on()将您选择的事件绑定到输入,请不要使用$.keydown()等快捷方式,因为从jQuery 1.7开始,$.on()是附加事件处理程序的首选方法(请参见此处:http://api.jquery.com/on/http://api.jquery.com/bind/)。


3
投票

您可以使用jQuery change()函数

© www.soinside.com 2019 - 2024. All rights reserved.