javascript - 文本区域onchange检测

Question

如何使用 javascript 检测 textarea 上的更改事件？
我正在尝试检测您键入时剩余的可用字符数。

我尝试使用 onchange 事件，但它似乎只在焦点不在时才起作用。

Answer 1

最好的方法是跨浏览器:使用 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求指点。