JQuery:检测输入字段的变化

Question

可能重复:
Jquery:如何检测文本框的内容已更改

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

.keypress事件的JQuery页面说它不一致？此外,它不适用于退格,删除等.

我不能使用.keydown,因为它会对shift,alt和箭头键等作出反应.此外,当用户按住某个键并插入多个字符时,它不会多次触发.

有没有简洁的方法我错过了？或者我应该使用.keydown并过滤掉由箭头键,移位等触发的事件？我主要担心的是,我不知道应该过滤掉的密钥.(我差点忘了alt和ctrl,我想可能还有其他人)但是那时我怎样才能检测到按下的键并插入多个字符？

作为奖励,它会检测由于粘贴(包括右键单击)引起的变化,但我从这里得到了解决方案.

Answer 1

您可以将"input"事件绑定到文本框.每次输入更改时都会触发,因此当您粘贴某些内容时(即使右键单击),删除并键入任何内容.

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

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

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

Answer 2

使用jquery 更改事件

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

一个例子

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

该优势.change拥有.keypress,.focus,.blur是.change事件才会触发时,输入已改变

Answer 3

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

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

1. 更改事件是不可取的,因为如果在编辑之后,只有在点击"保存"按钮之前在页面上的其他位置单击鼠标,它才会被触发.
2. 按键不处理退格键,删除键和粘贴选项.
3. Key Up处理所有内容,包括tab,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();
    });


}

Answer 4

使用$.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');
});

要回复以下评论,请在change此处记录javascript 事件:https://developer.mozilla.org/en-US/docs/Web/Events/change

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