blocks|key|291601|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|291602|$("#textbox").bind('paste',function()+{alert("Change+detected!");});|code-block|syntax|javascript|291603|参见demo+on+JSFiddle。|offset|length|291604|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/K682b/3/^0|0|0|2|G|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Try this:

<pre><code>$("#textbox").bind('paste',function() {alert("Change detected!");});
</code></pre>

See <a href="http://jsfiddle.net/K682b/3/" rel="nofollow noreferrer">demo on JSFiddle</a>.

blocks|key|74323|text|尝试下面的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|74324|$("#textbox").on('change+keypress+paste',+function()+{
++console.log("Handler+for+.keypress()+called.");
});|code-block|syntax|javascript|74325|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try the below Code:

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

blocks|key|291666|text|绑定到这两个事件是完成此操作的典型方法。还可以绑定到paste事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|291667|您可以绑定多个事件，如下所示：|291668|$("#textbox").on('change+keyup+paste',+function()+{
++++console.log('I+am+pretty+sure+the+text+box+changed');
});|code-block|syntax|javascript|291669|如果你想学究它，你也应该绑定到mouseup以适应文本的拖动，并添加一个lastValue变量来确保文本确实发生了变化：|offset|length|style|CODE|291670|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');
++++}
});|291671|如果你想成为super+duper书呆子，那么你应该使用一个间隔计时器来满足自动填充，插件等的需求：|291672|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);|291673|entityMap^0|0|0|0|10|9|0|0|6|B|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@$K|10|L|11|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|13|8|@$K|14|L|15|M|N]]|9|@]|A|$]]|$1|S|3|T|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|U|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|V|$]]

Binding to both events is the typical way to do it. You can also bind to the paste event.

You can bind to multiple events like this:

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

If you wanted to be pedantic about it, you should also bind to mouseup to cater for dragging text around, and add a <code>lastValue</code> variable to ensure that the text actually did change: 

<pre><code>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');
 }
});
</code></pre>

And if you want to be <code>super duper</code> pedantic then you should use an interval timer to cater for auto fill, plugins, etc:

<pre><code>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);
</code></pre>

blocks|key|291697|text|在现代浏览器中，您可以使用the+input+event|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|291698|DEMO|291699|$("#textbox").on('input',function()+{alert("Change+detected!");});|code-block|syntax|javascript|291700|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/Events/input|1|http://jsfiddle.net/K682b/6/^0|H|5|D|F|0|0|0|4|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]]]

On modern browsers, you can use <a href="https://developer.mozilla.org/en-US/docs/Web/Events/input" rel="noreferrer">the <code>input</code> event</a>:

<a href="http://jsfiddle.net/K682b/6/" rel="noreferrer">DEMO</a>

<pre><code>$("#textbox").on('input',function() {alert("Change detected!");});
</code></pre>

blocks|key|291714|text|$(this).bind('input+propertychange',+function()+{
++++++++//your+code+here
++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|291715|这是为打字，粘贴，鼠标右键点击粘贴等工作。|unstyled|291716|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

This is works for typing, paste, right click mouse paste etc.

blocks|key|74438|text|if+you+write+anything+in+your+textbox,+the+event+gets+fired.
code+as+follows+:|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|74439|HTML：|unstyled|74440|<input+type="text"+id="textbox"+/>|74441|JS：|74442|<script+type="text/javascript">
++$(function+()+{
++++++$("#textbox").bind('input',+function()+{
++++++alert("letter+entered");
++++++});
+++});
</script>|74443|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|M|3|-4|5|F|7|T|8|@]|9|@]|A|$]]]|N|$]]

<pre><code>if you write anything in your textbox, the event gets fired.
code as follows :
</code></pre>

HTML:

<pre><code>&lt;input type="text" id="textbox" /&gt;
</code></pre>

JS:

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

blocks|key|291769|text|读了你的评论后，我陷入了困境。我知道这不是一种正确的方式，但可以是一种变通的办法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|291770|$(function()+{
++++$(+"#inputFieldId"+).autocomplete({
++++++++source:+function(+event,+ui+)+{
++++++++++++alert("do+your+functions+here");
++++++++++++return+false;
++++++++}
++++});
});|code-block|syntax|javascript|291771|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Reading your comments took me to a dirty fix. This is not a right way, I know, but can be a work around.

<pre><code>$(function() {
 $( "#inputFieldId" ).autocomplete({
 source: function( event, ui ) {
 alert("do your functions here");
 return false;
 }
 });
});
</code></pre>

I found that jQuery change event on a textbox doesn't fire until I click outside the textbox.

HTML:

<pre><code>&lt;input type="text" id="textbox" /&gt;
</code></pre>

JS:

<pre><code>$("#textbox").change(function() {alert("Change detected!");});
</code></pre>

See <a href="http://jsfiddle.net/K682b/" rel="noreferrer">demo on JSFiddle</a>

My application requires the event to be fired on every character change in the textbox. I even tried using keyup instead...

<pre><code>$("#textbox").keyup(function() {alert("Keyup detected!");});
</code></pre>

...but it's a known fact that the keyup event isn't fired on right-click-and-paste.

Any workaround? Is having both listeners going to cause any problems?

jQuery textbox change event doesn't fire until textbox loses focus?

jQuery

我发现textbox上的jQuery更改事件直到我在textbox外部单击时才会触发。HTML：<input type="text" id="textbox" />JS：$("#textbox").change(function() {alert("Change detected!");});请参阅我的应用程序要求在文...

问jQuery textbox change事件在textbox失去焦点之前不会触发吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery textbox change事件在textbox失去焦点之前不会触发吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery textbox change事件在textbox失去焦点之前不会触发吗？
EN