我想检测什么时候文本框的内容已更改。 我可使用keyup方法,可是它也将检测不生成字母的击键,例如箭头键。 我想到了使用keyup事件执行此操做的两种方法: jquery
二者看起来都很麻烦。 git
我建议您看一下jQuery UI自动完成小部件。 他们在那里处理了大多数状况,由于他们的代码库比那里的大多数状况更为成熟。 github
如下是演示页面的连接,所以您能够验证其是否有效。 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毫秒后浏览内容。 在代码中看起来像这样: app
// 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 ); },
使用计时器的缘由是为了使UI有机会进行更新。 当运行Javascript时,没法更新UI,所以调用了delay函数。 这对于其余状况(例如,专一于文本框(由该代码使用))很是有效。 函数
所以,若是您不使用jQuery UI(或者在个人状况下开发自定义窗口小部件),则可使用窗口小部件或将代码复制到本身的窗口小部件中。 ui
'change'事件没法正常运行,可是'input'是完美的。 this
$('#your_textbox').bind('input', function() { /* This will be fired every time, when textbox's value changes. */ } );
在HTML /标准JavaScript中使用onchange事件。 spa
在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'); } }); });
您是否考虑使用更改事件 ?
$("#myTextBox").change(function() { alert("content changed"); });
使用闭包来记住按键以前复选框中的文本,并检查是否已更改。
是的 您不必定必须使用闭包,可是您须要记住旧值并将其与新值进行比较。
然而! 这仍然没法捕获全部更改,由于有一种方法能够编辑不涉及任何按键的文本框内容。 例如,选择一个文本范围,而后单击鼠标右键。 或拖动它。 或将文本从另外一个应用程序拖放到文本框中。 或经过浏览器的拼写检查更改单词。 要么...
所以,若是必须检测每一个更改,则必须进行轮询。 您能够window.setInterval
每秒(例如)每秒对照该字段的先前值进行检查。 你也能够连线onkeyup
相同的功能,使得由按键形成的更改都将反映更快。
笨拙的? 是。 就是这样,或者只是以普通的HTML onchange方式进行操做,不要尝试当即更新。