261

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

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

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

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

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

4

5 回答 5

805

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

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

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

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

于 2012-10-09T10:21:07.083 回答
25

使用 jquery更改事件

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

一个例子

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

, ,.change的优点是事件只会在输入改变时触发.keypress.focus.blur.change

于 2012-10-09T10:13:57.917 回答
11

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

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

  1. 不建议更改事件，因为只有在编辑后，在单击“保存”按钮之前单击页面上的其他位置时才会触发更改事件。
  2. Key Press 不处理 Backspace、Delete 和 Paste 选项。
  3. Key Up 处理所有内容，包括制表符、Shift 键。

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

希望它可以帮助你。

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


}
于 2012-10-09T10:27:57.433 回答
9

用于$.on()将您选择的事件绑定到输入，不要使用诸如$.keydown()etc 之类的快捷方式，因为从 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/

于 2012-10-09T10:18:13.460 回答
3

您可以使用 jQuery change() 函数

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

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

于 2012-10-09T10:14:32.200 回答