JQuery:检测输入字段的变化

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

JQuery页面的.keypress事件说它不一致?此外，它不工作的退格，删除等。

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

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

作为奖励，它会检测由于粘贴(包括右键单击)造成的更改，但我从在这里中有解决方案。

508854 次浏览
小开

使用jquery 更改事件

描述:绑定一个事件处理程序到“改变”JavaScript事件， 或在元素上触发该事件

一个例子

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

.change相对于.keypress， .focus， .blur的优点是.change事件只会触发当输入改变时

小开

可以使用jQuery的change()函数

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

在API Page: http://api.jquery.com/change/中有关于如何使用它的示例

小开

使用$.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事件被记录在这里

下面是一个使用jQuery的change事件处理输入元素的工作示例

小开
最佳答案

您可以将'input'事件绑定到文本框。这将触发每一次输入改变，所以当你粘贴一些东西(甚至用右键单击)，删除和键入任何东西。

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

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

这里有一个两者都有的例子:http://jsfiddle.net/6bSX6/

小开

相同的功能，我最近实现使用下面的功能。

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

  1. 更改事件是不可取的，因为它只会被触发，如果编辑后，鼠标在点击保存按钮之前点击页面上的其他地方。
  2. 按键不处理退格，删除和粘贴选项。
  3. 键Up处理所有内容，包括tab键，Shift键。

因此，我写了下面的功能组合按键，键up(退格，删除)和粘贴事件的文本字段。

希望对你有所帮助。

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




}

提交答案