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

IT技术 javascript jquery textbox keypress
2021-01-31 20:41:36

我想检测文本框的内容何时发生变化。我可以使用 keyup 方法,但这也将检测不生成字母的击键,如箭头键。我想到了两种使用 keyup 事件执行此操作的方法:

  1. 显式检查按下键的ASCII码是否为字母\退格\删除
  2. 使用闭包来记住击键之前文本框中的文本是什么,并检查这是否已更改。

两者看起来都有些麻烦。

6个回答

开始观察“输入”事件而不是“变化”。

jQuery('#some_text_box').on('input', function() {
    // do your stuff
});

...这很好很干净,但可以进一步扩展到:

jQuery('#some_text_box').on('input propertychange paste', function() {
    // do your stuff
});
'live' 已被弃用。所以利用' on'stackoverflow.com/a/15111970/1724777
2021-03-21 20:41:36
IE < 9 的唯一缺点是没有人使用它!
2021-03-24 20:41:36
“输入”的唯一缺点是它与 IE < 9 不兼容。
2021-04-02 20:41:36
input 是 html5 事件,并非所有浏览器都支持。developer.mozilla.org/en-US/docs/Web/API/window.oninput
2021-04-04 20:41:36
您还可以使用以下方法覆盖更多基础: .on('input propertychange paste', function() {
2021-04-09 20:41:36

在 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');
        }
    });
});
是的,这类似于我在我的问题中的选项 #2 中建议的内容。我更喜欢闭包,因为使用全局将使此功能仅适用于一个文本框。无论如何,看起来很奇怪 jquery 没有更简单的方法来做到这一点。
2021-03-18 20:41:36
仍然有可能无需击键即可更改内容,例如通过使用鼠标粘贴。如果您关心这一点,理论上您也可以捕获鼠标事件,但这种设置甚至更丑。另一方面,如果您愿意忽略鼠标驱动的更改,就可以了。
2021-03-18 20:41:36
这确实很奇怪,但我怀疑是否有更好的方法来做到这一点。您可以使用 setInterval 然后检查内容是否每 0.1 秒更改一次,然后执行某些操作。这还将包括鼠标粘贴等。但这听起来不太优雅。
2021-04-03 20:41:36

'change' 事件不能正常工作,但 'input' 是完美的。

$('#your_textbox').bind('input', function() {
    /* This will be fired every time, when textbox's value changes. */
} );
@David 他也没有指定哪个浏览器
2021-03-11 20:41:36
@Chris“规范支持所有浏览器”-仅当您是虐待狂时。对于 IE 8/9 上 2% 的全球用户,没有充分的理由避免 HTML5 的好处。caniuse.com/#feat=input-event
2021-03-19 20:41:36
OP 没有指定跨浏览器兼容性的需要。@schwarzkopfb 提供了解决方案。没有理由投票反对,因为您有代表可以这样做。
2021-03-21 20:41:36
@jmo21 我认为当浏览器不是特定的时,我们可以假设 Web 开发解决方案应该是跨功能的。规范是支持所有浏览器。
2021-04-06 20:41:36
这非常适合我的情况,尽管.on从 1.7 开始推荐使用(而不是.bind)。
2021-04-08 20:41:36

这个怎么样:

< 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

您在使用 Chrome 吗?似乎这是 chrome 的错误而不是 jQuery 的更改事件bugs.jquery.com/ticket/9335
2021-03-16 20:41:36
我对这个答案的问题是,一旦你模糊文本框,它就会触发,即使值没有改变。罪魁祸首是“改变”。
2021-03-27 20:41:36
然而,我能够找到其他人的代码,即使这个解决方案也不起作用。数字字段虽然
2021-03-28 20:41:36
工作但有一个小错误,如果console.log你输入一个字符时它记录两次的字段值。
2021-04-02 20:41:36

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

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

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

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

麻烦吗?是的。但就是这样,或者只是按照正常的 HTML onchange 方式进行操作,不要尝试即时更新。

现在 HTML5input事件是可行的,并且适用于所有主要浏览器的当前版本。
2021-03-29 20:41:36