JQuery：检测输入字段的变化

JQuery: detect change in input field

提问by CL22

I want to detect when a user's keyboard actions alter the value of a text field. It should work consistently across modern browsers.

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

The JQuery page for the .keypress event says it's not consistent? Also, it doesn't work for backspace, delete etc.

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

I can't use .keydown as it is because it reacts to shift, alt and arrow keys etc. Also, it doesn't fire more than once when the user holds down a key and multiple characters are inserted.

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

Is there a concise method I'm missing? Or should I use .keydown and filter out events that are triggered by arrow keys, shift and so on? My main concern is there will be keys that I'm not aware should be filtered. (I nearly forgot about alt and ctrl, I suppose there could be others) But then how would I detect the key being held down and inserting multiple characters?

有没有我缺少的简洁方法？或者我应该使用 .keydown 并过滤掉由箭头键、shift 等触发的事件？我主要担心的是会有一些我不知道应该过滤的键。（我几乎忘记了 alt 和 ctrl，我想可能还有其他的）但是我如何检测被按住的键并插入多个字符？

As a bonus it would detect changes due to pasting (including right-clicking) but I have the solution to that from here.

作为奖励，它会检测由于粘贴（包括右键单击）引起的更改，但我从这里有解决方案。

回答by Timm

You can bind the 'input' event to the textbox. This would fire every timethe input changes, so when you paste something (even with right click), delete and type anything.

您可以将“输入”事件绑定到文本框。每次输入更改时都会触发，因此当您粘贴某些内容（即使右键单击）时，请删除并键入任何内容。

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

If you use the changehandler, this will only fire after the user deselects the input box, which may not be what you want.

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

There is an example of both here: http://jsfiddle.net/6bSX6/

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

回答by Sibu

Use jquery change event

使用 jquery更改事件

Description: Bind an event handler to the "change" JavaScript event, or trigger that event on an element.

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

An example

一个例子

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

The advantage that .changehas over .keypress, .focus, .bluris that .changeevent will fire only when input has changed

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

回答by R Shah

Same functionality i recently achieved using below function.

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

I wanted to enable SAVE button on edit.

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

1. Change event is NOT advisable as it will ONLY be fired if after editing, mouse is clicked somewhere else on the page before clicking SAVE button.
2. Key Press doesnt handle Backspace, Delete and Paste options.
3. Key Up handles everything including tab, Shift key.

1. 不建议更改事件，因为只有在编辑后，在单击“保存”按钮之前在页面上的其他位置单击鼠标，才会触发它。
2. 按键不处理退格、删除和粘贴选项。
3. Key Up 处理所有内容，包括 Tab、Shift 键。

Hence i wrote below function combining keypress, keyup (for backspace, delete) and paste event for text fields.

因此，我写了下面的函数，结合了按键、按键（用于退格、删除）和文本字段的粘贴事件。

Hope it helps you.

希望对你有帮助。

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


}

回答by totallyNotLizards

Use $.on()to bind your chosen event to the input, don't use the shortcuts like $.keydown()etc because as of jQuery 1.7 $.on()is the preferred method to attach event handlers (see here: http://api.jquery.com/on/and http://api.jquery.com/bind/).

使用$.on()您所选择的事件绑定到输入，不要使用类似的快捷方式$.keydown()等因为jQuery的1.7$.on()是附加的事件处理程序（见这里的首选方法：http://api.jquery.com/on/和HTTP： //api.jquery.com/bind/)。

$.keydown()is just a shortcut to $.bind('keydown'), and $.bind()is what $.on()replaces (among others).

$.keydown()只是 的快捷方式$.bind('keydown')，并且$.bind()是$.on()替代品（以及其他）。

To answer your question, as far as I'm aware, unless you need to fire an event on keydownspecifically, the changeevent should do the trick for you.

要回答您的问题，据我所知，除非您需要keydown专门触发一个事件，否则该change事件应该为您解决问题。

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

To respond to the below comment, the javascript changeevent is documented here: https://developer.mozilla.org/en-US/docs/Web/Events/change

为了回应下面的评论，change这里记录了 javascript事件：https: //developer.mozilla.org/en-US/docs/Web/Events/change

And here is a working example of the changeevent working on an input element, using jQuery: http://jsfiddle.net/p1m4xh08/

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

回答by RRikesh

You can use jQuery change() function

您可以使用 jQuery change() 函数

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

There are examples on how to use it on the API Page: http://api.jquery.com/change/

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