138

我发现文本框上的 jQuery 更改事件在我单击文本框外部之前不会触发。

HTML：

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

JS：

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

在 JSFiddle 上查看演示

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

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

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

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

4

7 回答 7

307

绑定到这两个事件是典型的方法。您还可以绑定到粘贴事件。

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

$("#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);
于 2013-06-26T10:29:25.007 回答
88

在现代浏览器上，您可以使用input事件：

演示

$("#textbox").on('input',function() {alert("Change detected!");});
于 2013-06-26T10:30:09.213 回答
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>
于 2014-11-20T05:00:15.943 回答
4 
$(this).bind('input propertychange', function() {
        //your code here
    });

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

于 2014-06-20T17:00:35.047 回答
2

尝试这个：

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

请参阅JSFiddle 上的演示。

于 2013-06-26T10:24:44.240 回答
0

试试下面的代码：

$("#textbox").on('change keypress paste', function() {
  console.log("Handler for .keypress() called.");
});
于 2013-06-26T10:25:40.827 回答
0

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

$(function() {
    $( "#inputFieldId" ).autocomplete({
        source: function( event, ui ) {
            alert("do your functions here");
            return false;
        }
    });
});
于 2016-04-26T04:39:05.893 回答