是否有“文本框内容更改”DOM 事件？

Posted 2023-03-05

【中文标题】是否有“文本框内容更改”DOM 事件？

【英文标题】：Is there a "texbox content changed" DOM event?

【发布时间】：2011-01-20 13:44:22

【问题描述】：

每次我需要编写一段监控输入框的 javascript 时，我通常会做如下的事情：

$("#field").keyup(myHandler).keydown(myHandler).change(myHandler);

它并不完美，但它通常在大多数情况下都有效，所以我继续前进。我只是碰巧有一点时间来适当地调查一下。可能主要问题是没有捕捉通过鼠标完成的编辑（右键单击+粘贴/剪切）。而且，这并不是我真正想要的。这会捕获我不真正感兴趣的所有光标移动和其他键盘事件。所以问题是：

是否有一个可靠的跨浏览器事件，每次在输入或文本区域的内容发生变化后触发？

在简短的搜索中，我找到了onpropertychange 和 DOMAttrModified 事件。但除了它们不能在所有浏览器中工作之外，它们似乎在编辑输入或文本区域时不会被触发。

【问题讨论】：

也许是个愚蠢的问题，但为什么onchange 不是这里的选项？是不是开得太早了？

触发太晚了；它仅在文本框离开时触发。

【参考方案1】：

看起来至少最新版本的 Internet Explorer、Firefox、Chrome 和 Safari 都支持 cut 和 paste 事件，这些事件在文本被剪切或粘贴到给定输入元素后立即触发。事件由键盘和鼠标交互触发。侦听这些事件和其他事件的组合应该提供您正在寻找的功能。

$("#foo").bind("keyup keydown change paste cut", handler);

我在 Mac 上使用 Firefox 3.6、Chrome 5.0（开发版）和 Safari 4 以及在 Windows 上使用 Firefox 3.5 和 IE8 进行了测试。

【讨论】：

好提示。为什么不用 keypress 而不是 keyup、keydown？

取决于浏览器，keypress 事件并非在所有情况下都被触发。例如，当按下 Control 键时，keydown 和 keyup 将被触发，但keypress 将不会。我想在这种情况下没关系，但由于 OP 的示例使用了keydown 和keyup，我也这样做了。在这里使用 keypress 也可以。

谢谢，非常有用的提示。另外，我不知道您可以像这样简单地连接事件名称：$("#foo").bind("keyup keydown change paste cut", handler)。