使用 Javascript/jQuery 捕获对输入框内容的所有更改答案

【问题标题】：Catching all changes to the contents of an input box using Javascript/jQuery使用 Javascript/jQuery 捕获对输入框内容的所有更改
【发布时间】：2011-03-31 02:15:17
【问题描述】：

我有一个带有输入框的页面，以及一个处理该输入框的值并生成一段文本的函数。我希望此文本始终与输入框的内容相关，因此我使用 jQuery 将几个事件处理程序附加到它以捕获任何更改：

$('#input').bind('keyup cut paste', function(){...});

这在大多数情况下都很有效。每当用户以任何方式使用键盘修改内容，或右键单击以使用剪切或粘贴功能时，文本都会立即更新。但是，有两个事件我还没有弄清楚如何捕获，如果有可能的话：

当用户选择一个文本并将其拖动到输入框中的不同位置时
当用户使用右键单击上下文菜单中的删除操作时

这两者当然可以通过绑定change 事件来检测，但是这种方法的问题是它在输入框失去焦点之前不会触发。这些绑定的重点是让文本随着输入框值的变化而实时更新，所以change 不好。

英语是我的第二语言，所以我的 Google 搜索措辞可能很糟糕，但到目前为止，他们一无所获。在浏览了几个相关的 SO 页面后，我也没有找到任何解决方案，所以我在这里问。是否有我不知道的事件绑定？如果没有，我可以采取不同的方法吗？或者这对于普通的 Javascript 来说根本不可能？

【问题讨论】：

我永远不会知道英语是你的第二语言，所以我觉得这不是问题;)

标签： javascript jquery javascript-events

【解决方案1】：

在非 IE 浏览器中，您可以处理 input 事件。
在IE中可以处理propertychange事件。

Demo（适用于所有浏览器）

【讨论】：

太棒了，正是我想要的！ :)
如果从文档外部拖入文本、使用 ctrl+x（剪切）或从上下文菜单剪切，则在 Opera 中不起作用。

【解决方案2】：

this SO question (and related jsfiddle) 可能会回答您的问题。

（在链接的jsfiddle上，将文本放在顶部框中进行测试）

也就是说，绑定到mouseup和mousedown等

【讨论】：

我也试过了，但没有成功；在那个 jsfiddle 中，如果您尝试使用上下文菜单中的 Delete 选项，您将看到没有触发任何事件。虽然当我开始在输入框中拖动我的选择时它会做出反应，但当我放下它并发生实际变化时它不会触发任何东西。不过谢谢:)

【解决方案3】：

如果您找不到涵盖所有情况的事件组合，您可能需要使用setInterval(function() {... }, period)。你可以试试period 看看它的效果如何。

【讨论】：

幸运的是，这不是必需的。