如何使用 javascript 检测 textarea 上的更改事件?
我正在尝试检测您键入时剩余的可用字符数。
我尝试使用 onchange 事件,但它似乎只在焦点不在时才起作用。
最佳答案
最好的方法是跨浏览器:使用 input
的组合和 onpropertychange
事件,像这样:
var area = container.querySelector('textarea');
if (area.addEventListener) {
area.addEventListener('input', function() {
// event handling code for sane browsers
}, false);
} else if (area.attachEvent) {
area.attachEvent('onpropertychange', function() {
// IE-specific event handling code
});
}
input
事件处理 IE9+, FF, Chrome, Opera and Safari , onpropertychange
处理 IE8 (它也适用于 IE6 和 7,但存在一些错误)。
使用 input
和 onpropertychange
的优点是它们不会在不必要的情况下触发(比如按下 Ctrl
或 Shift
键);所以如果您希望在文本区域内容更改时运行相对昂贵的操作,这是可行的方法。
现在,IE 一如既往地在支持这一点上做了半途而废的工作:删除input 和 onpropertychange
都不会在 IE 中触发> 来自文本区域。因此,如果您需要处理 IE 中的字符删除,请使用 keypress
(与使用 keyup
/keydown
相对,因为它们甚至只触发一次如果用户按下并按住某个键)。
来源:http://www.alistapart.com/articles/expanding-text-areas-made-elegant/
编辑: 上面的解决方案似乎并不完美,正如评论中正确指出的那样:textarea 上的 addEventListener
属性的存在 不 暗示您正在使用健全的浏览器;同样,attachEvent
属性的存在并不不暗示 IE。如果你想让你的代码真正做到无懈可击,你应该考虑改变它。参见 Tim Down's comment求指点。
关于javascript - 文本区域onchange检测,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2823733/