如何检测文本框的内容已经改变
我想要检测一个文本框的内容已经改变。 我可以使用键控方法，但是也会检测不生成字母的按键，如箭头键。 我想到了两种使用keyup事件的方法：
- 如果按下的密钥的ASCII码是一个字母\ backspace \ delete，则明确检查
- 使用闭包记住键击前文本框中的文本，并检查是否已经更改。
两个看起来有点麻烦。
开始观察“输入”事件而不是“更改”。
jQuery('#some_text_box').on('input', function() { // do your stuff });
…这是很好，干净，但可以进一步扩展到：
jQuery('#some_text_box').on('input propertychange paste', function() { // do your stuff });
在HTML /标准JavaScript中使用onchange事件。
在jQuery中是change（）事件。 例如：
$('element').change(function() { // do something } );
编辑
看完一些评论后，又该如何呢？
$(function() { var content = $('#myContent').val(); $('#myContent').keyup(function() { if ($('#myContent').val() != content) { content = $('#myContent').val(); alert('Content has been changed'); } }); });
“变化”事件不能正常工作，但“输入”是完美的。
$('#your_textbox').bind('input', function() { /* This will be fired every time, when textbox's value changes. */ } );
这个怎么样：
<jQuery 1.7
$("#input").bind("propertychange change keyup paste input", function(){ // do stuff; });
> jQuery 1.7
$("#input").on("propertychange change keyup paste input", function(){ // do stuff; });
这适用于IE8 / IE9，FF，Chrome
使用闭包记住键击之前的复选框中的文本，并检查是否已经更改。
是的。 你不必一定要使用闭包，但是你需要记住旧的价值，并将其与新的价值进行比较。
然而！ 这仍然不会抓住每一个变化，因为有一种编辑文本框内容的方式，不涉及任何按键。 例如，选择一个文本范围，然后右键单击剪切。 或者拖动它。 或者将文本从另一个应用程序放入文本框。 或者通过浏览器的拼写检查来更改单词。 要么…
所以，如果你必须检测到每一个变化，你必须进行轮询。 你可以window.setInterval每隔（说）秒检查字段与先前的值。 您还可以将onkeyup连接到相同的功能，以便更快地反映由按键引起的更改。
繁琐？ 是。 但是，正是这种方式，或者仅仅是正常的HTML onchange方式，而不要尝试即时更新。
$(document).on('input','#mytxtBox',function () { console.log($('#mytxtBox').val()); });
您可以使用“输入”事件来检测文本框中的内容更改。 不要使用“live”来绑定事件，因为它在Jquery-1.7中被弃用，所以请使用'on'。
我假设你正在寻找交互的时候文本框的变化（即通过Ajax检索一些数据）。 我正在寻找这个相同的功能。 我知道使用全局并不是最强大或最优雅的解决方案，但这就是我所使用的。 这里是一个例子：
var searchValue = $('#Search').val(); $(function () { setTimeout(checkSearchChanged, 0.1); }); function checkSearchChanged() { var currentValue = $('#Search').val(); if ((currentValue) && currentValue != searchValue && currentValue != '') { searchValue = $('#Search').val(); $('#submit').click(); } else { setTimeout(checkSearchChanged, 0.1); } }
这里需要注意的一点是，我使用setTimeout而不是setInterval，因为我不想同时发送多个请求。 这可以确保在提交表单时定时器“停止”，并在请求完成时“启动”。 我通过在我的ajax调用完成时调用checkSearchChanged来做到这一点。 显然你可以扩大这个来检查最小长度等。
在我的情况下，我使用ASP.Net MVC，所以你可以看到如何将MVC Ajax与以下文章：
我会建议看看jQuery UI自动填充小部件。 他们处理大部分的案例，因为他们的代码比其他大多数都要成熟。
下面是一个演示页面的链接，所以你可以验证它的作品。 http://jqueryui.com/demos/autocomplete/#default
通过阅读资料来源，看到他们如何解决问题，您将获得最大的收益。 你可以在这里找到它： https ： //github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js 。
基本上他们这样做，他们绑定input, keydown, keyup, keypress, focus and blur 。 然后他们有特殊的处理各种按键，如上page up, page down, up arrow key and down arrow key 。 获取文本框的内容之前使用计时器。 当用户键入与命令不对应的键（向上键，向下键等）时，会有一个计时器在大约300毫秒后浏览内容。 它在代码中看起来像这样：
// switch statement in the switch( event.keyCode ) { //... case keyCode.ENTER: case keyCode.NUMPAD_ENTER: // when menu is open and has focus if ( this.menu.active ) { // #6055 - Opera still allows the keypress to occur // which causes forms to submit suppressKeyPress = true; event.preventDefault(); this.menu.select( event ); } break; default: suppressKeyPressRepeat = true; // search timeout should be triggered before the input value is changed this._searchTimeout( event ); break; } // ... // ... _searchTimeout: function( event ) { clearTimeout( this.searching ); this.searching = this._delay(function() { // * essentially a warpper for a setTimeout call * // only search if the value has changed if ( this.term !== this._value() ) { // * _value is a wrapper to get the value * this.selectedItem = null; this.search( null, event ); } }, this.options.delay ); },
使用定时器的原因是使用户界面有机会进行更新。 当Javascript运行时，UI不能更新，因此调用了延迟函数。 这适用于其他情况，例如关注文本框（由该代码使用）。
所以，如果你不使用jQuery UI（或者在我的例子中开发一个自定义的小部件），你可以使用这个小部件或者将代码复制到你自己的小部件中。
我想问你为什么试图检测文本框的内容实时改变？
另一种方法是设置一个计时器（通过setIntval？），并将上次保存的值与当前值进行比较，然后重置计时器。 这将保证捕捉任何变化，不管是由键盘，鼠标还是其他一些你不认为的输入设备引起的变化，甚至是JavaScript改变应用程序不同部分的值（另一个可能没有人提到的）。
你考虑使用变化事件 ？
$("#myTextBox").change(function() { alert("content changed"); });
这里有一个完整的工作示例。
<html> <title>jQuery Summing</title> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> $(document).ready(function() { $('.calc').on('input', function() { var t1 = document.getElementById('txt1'); var t2 = document.getElementById('txt2'); var tot=0; if (parseInt(t1.value)) tot += parseInt(t1.value); if (parseInt(t2.value)) tot += parseInt(t2.value); document.getElementById('txt3').value = tot; }); }); </script> </head> <body> <input type='text' class='calc' id='txt1'> <input type='text' class='calc' id='txt2'> <input type='text' id='txt3' readonly> </body> </html>
通过定制的jQuery shim使用textchange事件来实现跨浏览器input兼容性。 http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html （最近分叉的github： https ： //github.com/pandell /jquery-splendid-textchange/blob/master/jquery.splendid.textchange.js ）
这将处理所有的输入标签，包括<textarea>content</textarea> ，它并不总是适用于keyup等等。（！）只有jQuery on("input propertychange")持续处理<textarea>标签，上面是一个shim对于不了解input事件的所有浏览器。
<!DOCTYPE html> <html> <head> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="https://raw.githubusercontent.com/pandell/jquery-splendid-textchange/master/jquery.splendid.textchange.js"></script> <meta charset=utf-8 /> <title>splendid textchange test</title> <script> // this is all you have to do. using splendid.textchange.js $('textarea').on("textchange",function(){ yourFunctionHere($(this).val()); }); </script> </head> <body> <textarea style="height:3em;width:90%"></textarea> </body> </html>
JS Bin测试
这也处理粘贴，删除，并不重复关键的努力。
如果不使用填充，请on("input propertychange")事件on("input propertychange")使用jQuery。
// works with most recent browsers (use this if not using src="...splendid.textchange.js") $('textarea').on("input propertychange",function(){ yourFunctionHere($(this).val()); });
像这样的东西应该工作，主要是因为focus和focusout将结束与两个单独的价值观。 我在这里使用data ，因为它存储在元素中的值，但不触及DOM。 这也是一个简单的方法来存储连接到它的元素的值。 您可以轻松使用更高范围的变量。
var changed = false; $('textbox').on('focus', function(e) { $(this).data('current-val', $(this).text(); }); $('textbox').on('focusout', function(e) { if ($(this).data('current-val') != $(this).text()) changed = true; } console.log('Changed Result', changed); }
