在文本框失去焦点之前,不会触发jQuery文本框更改事件?


133

我发现在文本框上单击之前,不会触发文本框上的jQuery change事件。

HTML:

<input type="text" id="textbox" />

JS:

$("#textbox").change(function() {alert("Change detected!");});

参见有关JSFiddle的演示

我的应用程序要求在文本框中的每个字符更改都触发该事件。我什至尝试使用keyup ...

$("#textbox").keyup(function() {alert("Keyup detected!");});

...但这是众所周知的事实,不会在右键单击并粘贴时触发keyup事件。

任何解决方法?两个听众都会引起任何问题吗?


^^这个。您可以根据需要拥有任意数量的事件处理程序。
恢复莫妮卡·塞里奥(Monica Cellio)2013年

Answers:


297

绑定到两个事件是完成此操作的典型方法。您还可以绑定到粘贴事件。

您可以像这样绑定多个事件:

$("#textbox").on('change keyup paste', function() {
    console.log('I am pretty sure the text box changed');
});

如果您想学究它,还应该绑定到mouseup以迎合文本的拖动,并添加一个lastValue变量以确保文本确实发生了变化:

var lastValue = '';
$("#textbox").on('change keyup paste mouseup', function() {
    if ($(this).val() != lastValue) {
        lastValue = $(this).val();
        console.log('The text box really changed this time');
    }
});

而且,如果您想super duper上学,则应该使用间隔计时器来满足自动填充,插件等的需求:

var lastValue = '';
setInterval(function() {
    if ($("#textbox").val() != lastValue) {
        lastValue = $("#textbox").val();
        console.log('I am definitely sure the text box realy realy changed this time');
    }
}, 500);

9
终于有人读了问题并回答了整个问题!
恢复莫妮卡·塞里奥(Monica Cellio)2013年

4
.on('change keyup paste', function() {...}实际会发射多次!如果我键入了一个字符,然后在外部单击,则会触发'change'和'keyup'事件,导致该函数被多次执行!如果我右键单击粘贴然后在外部单击,则会触发“更改”和“粘贴”。哎呀!在使用Ctrl + V粘贴然后单击外部时会触发三次!
SNag 2013年

1
@SNag是的,因此同样,您应该使用lastValue变量添加检查以确保其实际上已更改。
Petah 2013年

1
+1。但是,在这里甚至有必要绑定到“更改”吗?对我来说,目前尚不清楚哪种情况下可以处理(在变更被触发时)还没有处理。
Madbreaks 2013年

1
在实际粘贴文本之前会触发粘贴事件
developerbmw

85

在现代浏览器,就可以使用input事件

演示

$("#textbox").on('input',function() {alert("Change detected!");});

1
很好-我没有意识到。是HTML5吗?
恢复莫妮卡·塞里奥(Monica Cellio)2013年

4
我很想接受这个答案,但是就像您说的那样,这是现代浏览器的解决方案。我的Web应用程序针对仍在使用IE8的用户,并且在IE8上不起作用。:(我能说什么.. :(
SNag 2013年

例如,如果选择所有文本并按Delete键,则不会触发
jjxtra

4
$(this).bind('input propertychange', function() {
        //your code here
    });

这适用于键入,粘贴,右键单击鼠标粘贴等。


1
这似乎是最好的解决方案,因为如果您执行诸如单击数字字段上的向上箭头之类的操作,它不会触发多个事件。
贾斯汀

简单有效的解决方案
Abdulhameed

4
if you write anything in your textbox, the event gets fired.
code as follows :

HTML:

<input type="text" id="textbox" />

JS:

<script type="text/javascript">
  $(function () {
      $("#textbox").bind('input', function() {
      alert("letter entered");
      });
   });
</script>

2

试试这个:

$("#textbox").bind('paste',function() {alert("Change detected!");});

请参阅JSFiddle上的演示


由于问题在于粘贴,因此无法正常工作。右键单击并粘贴不会触发事件。
Dhaval Marthak 2013年

那和使用有关bind()呢?
恢复莫妮卡·塞里奥(Monica Cellio)2013年

他告诉记者,他KeyUp事件不会触发时,右键单击+上粘贴,所以keyupchange()都有自己的典型行为,所以ID,他希望再执行事件paste可能是选项
Dhaval Marthak

当然,但这仍然无法回答为什么使用bind代替代替on
恢复莫妮卡·塞里奥(Monica Cellio)2013年

0

试试下面的代码:

$("#textbox").on('change keypress paste', function() {
  console.log("Handler for .keypress() called.");
});

如问题中所述,如何用鼠标捕获粘贴?
恢复莫妮卡·塞里奥(Monica Cellio)2013年

按键是合适的,因为他说过event to be fired on every character change in the textbox
Venkat.R 2013年

如果您读完所有问题,您也会看到他说:"...but it's a known fact that the keyup event isn't fired on right-click-and-paste."
恢复莫妮卡·塞利奥(Monica Cellio),

0

阅读您的评论使我陷入了混乱。我知道这不是正确的方法,但是可以解决。

$(function() {
    $( "#inputFieldId" ).autocomplete({
        source: function( event, ui ) {
            alert("do your functions here");
            return false;
        }
    });
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.