我想检测文本框的内容何时发生了变化。我可以使用keyup方法,但这也将检测不生成字母的击键,如方向键。我想到了两种使用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
});

其他回答

使用闭包来记住按键之前复选框中的文本是什么,并检查它是否已更改。

是的。不一定要使用闭包,但需要记住旧值并将其与新值进行比较。

然而!这仍然不会捕捉每一个变化,因为有一种编辑文本框内容的方法,不涉及任何按键。例如,选择一个文本范围,然后右键单击剪切。或者拖着它。或者从另一个应用程序中删除文本到文本框中。或者通过浏览器的拼写检查更改一个单词。还是……

因此,如果必须检测每个变化,就必须进行轮询。你可以打开窗户。setInterval每(比如说)秒检查字段是否与之前的值对应。您还可以将onkeyup连接到相同的函数,以便更快地反映由按键引起的更改。

麻烦吗?是的。但这就是正常的HTML onchange方式,不要尝试即时更新。

我建议看看jQuery UI自动完成小部件。他们在那里处理了大多数情况,因为他们的代码基础比大多数人更成熟。

下面是一个演示页面的链接,您可以验证它的工作。http://jqueryui.com/demos/autocomplete/#default

阅读源代码,看看他们是如何解决问题的,你会得到最大的好处。你可以在这里找到它:https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js。

基本上它们都做了,它们绑定到输入,键下,键上,键按,聚焦和模糊。然后它们对各种键都有特殊的处理,比如向上翻页,向下翻页,向上箭头键和向下箭头键。在获取文本框的内容之前使用计时器。当用户输入一个与命令不对应的键(上键、下键等)时,会有一个计时器在大约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 );
},

使用计时器的原因是为了让UI有机会更新。当Javascript运行时,UI不能被更新,因此需要调用delay函数。这适用于其他情况,如保持对文本框(由该代码使用)的关注。

因此,如果不使用jQuery UI(或者像我这样开发自定义小部件),可以使用小部件,也可以将代码复制到自己的小部件中。

$(document).on('input','#mytxtBox',function () { 
 console.log($('#mytxtBox').val());
});

您可以使用'input'事件来检测文本框中的内容更改。不要使用'live'来绑定事件,因为它在Jquery-1.7中已弃用,所以要使用'on'。

这个怎么样:

< 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

document.getElementById('txtrate' + rowCount).onchange = function () {            
       // your logic
};

这个工作得很好,但在点击时也会触发事件,这并不好。我的系统进入循环。 而

$('#txtrate'+rowCount).bind('input', function() {
        //your logic
} );

在我的场景中非常适用。它只在值改变时起作用。 可以使用document代替$ sign。getElementById太