如何检测文本框的内容已更改

JavaScript

猴子Davaid神乐

2020-03-17

我想检测何时文本框的内容已更改。我可以使用keyup方法,但是它也可以检测不会产生字母的击键,例如箭头键。我想到了使用keyup事件执行此操作的两种方法:

  1. 仔细检查所按键的ASCII码是否为字母\退格\删除
  2. 使用闭包来记住按键之前文本框中的文本,并检查是否已更改。

两者看起来都很麻烦。

第1854篇《如何检测文本框的内容已更改》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

5个回答
凯梅小胖 2020.03.17

您是否考虑使用更改事件

$("#myTextBox").change(function() { alert("content changed"); });
L理查德 2020.03.17

我建议您看一下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 );
},

使用计时器的原因是为了使UI有机会进行更新。运行Javascript时,无法更新UI,因此调用了delay函数。这对于其他情况(例如,专注于文本框(由该代码使用))效果很好。

因此,如果您不使用jQuery UI(或者在我的情况下开发自定义窗口小部件),则可以使用窗口小部件或将代码复制到自己的窗口小部件中。

番长达蒙 2020.03.17

我想问一下您为什么要尝试检测文本框的内容何时实时更改

一种替代方法是设置一个计时器(通过setIntval?),然后将最后保存的值与当前值进行比较,然后重置一个计时器。这将确保捕获任何更改,无论是由键,鼠标,您未考虑的其他输入设备引起的更改,还是JavaScript从应用程序其他部分更改值(没有人提及的另一种可能性)引起的更改。

阿飞Eva 2020.03.17

这个怎么样:

<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

路易伽罗 2020.03.17

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

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

然而!这仍然无法解决所有更改,因为有一种方法可以编辑不涉及任何按键的文本框内容。例如,选择一个文本范围,然后单击鼠标右键。或拖动它。或将文本从另一个应用程序拖放到文本框中。或通过浏览器的拼写检查更改单词。要么...

因此,如果必须检测每个更改,则必须进行轮询。您可以window.setInterval每隔一秒钟(例如)一秒钟检查该字段与之前的值。你也可以电汇onkeyup到同一个功能,使得变化由按键引起的反映更快。

笨拙的?是。就是这样,或者只是以普通的HTML onchange方式进行操作,不要尝试立即更新。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android