跨浏览器JavaScript输入实时更改/粘贴检测

Question

有没有一种跨浏览器的方法来检测输入字段的实时更改？所谓“实时”，指的是不在字段失去焦点时、不在下一个按键时等等。立即或类似立即的反应。

使用jQuery和.change()、.keyup()、.bind('paste')等组合，我可以在某些浏览器中获得工作中的实时更改检测，但并非所有浏览器都可以。使用不同的组合会使其在其他浏览器中也有所作为。

最难处理的是对输入字段的鼠标操作-选择文本并移动它（本质上是剪切和粘贴），右键单击并粘贴或剪切等等。由于某种原因，甚至mousedown()和mouseup()似乎都不够好用。

我现在能想到的唯一跨浏览器解决方案是每100毫秒检查一次输入字段值，并将该值与存储的值进行比较。但当事件驱动的解决方案如此接近时，这似乎过度了。

是否有jQuery插件已经可以做到这一点？或者还有其他方法来实现这一点吗？

- javascripteroo

---

jQuery 应该在跨浏览器兼容性方面表现良好，至少对于 http://docs.jquery.com/Browser_Compatibility 中列出的浏览器及其版本而言如此；如果不是这种情况，我建议您提交一个错误报告。 - azatoth

@aza，我不确定应该使用哪些jQuery事件助手来实现我的目标（即在输入字段的任何更改时立即更新），因为.change()在输入字段失去焦点时触发。你知道吗？ - javascripteroo

一个简单的解决方案如下所述： http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript - biziclop

Answer 1

完成更改和键处理程序后，您可以添加剪切/复制/粘贴的处理程序。它们在Firefox >=3、IE、Safari和Chrome中都有效（但不适用于Opera/Konqueror）。

这样是否涵盖了您使用的所有情况？

- Chris Lercher

---

看起来很有前途。但是在IE8中无法检测到拖放更改。谢谢，我会进一步调查的。传统的事件附加方法是elm['onchange'] = fn吗？ - javascripteroo

@javascripteroo：很高兴知道IE8的这个情况。是的，那是传统模型（与elm.onchange = fn相同），更多信息请参见：http://www.quirksmode.org/js/events_tradmod.html。 - Chris Lercher

Answer 2

根据您需要支持的浏览器，您可能会使用HTML5的oninput。
它会在监视的输入更改时立即触发。在jQuery中，您只需执行以下操作：

$('#my-input').bind('input', function(e) {
    console.log("#my-input's value changed");
});

- raphinesse

---

"oninput" 浏览器支持：http://blog.danielfriesen.name/2010/02/16/html5-browser-maze-oninput-support/ - Dan