如何使用javascript检测textarea上的更改事件？
我正在尝试检测您键入时剩余的可用字符数。
我尝试使用 onchange 事件，但这似乎只在焦点消失时才开始。
文本区域变化检测
IT技术
javascript
2021-01-12 14:21:11
6个回答
最好的方法是跨浏览器：使用input和onpropertychangeevents的组合，如下所示：
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 和 Safari，并onpropertychange处理IE8（它也适用于 IE6 和 7，但存在一些错误）。
使用inputand的好处onpropertychange是它们不会不必要地触发（比如按下Ctrl或Shift键时）；所以如果你想在 textarea 内容改变时运行一个相对昂贵的操作，这是要走的路。
现在 IE 一如既往地在支持这一点上做了一半的工作：当从 textarea中删除字符时，IE 中既input不会也不会onpropertychange触发。因此，如果您需要处理 IE 中的字符删除，请使用（而不是使用/ ，因为即使用户按下并按住某个键，它们也只会触发一次）。keypresskeyupkeydown
来源：http : //www.alistapart.com/articles/expanding-text-areas-made-elegant/
编辑：似乎即使上述解决方案也不完美，正如评论中正确指出的那样：addEventListenertextarea 上属性的存在并不意味着您正在使用正常的浏览器；同样，该attachEvent属性的存在并不意味着 IE。如果您希望您的代码真正密封，您应该考虑更改它。请参阅Tim Down 的评论以获取指示。
为此，您将需要使用onkeyup 和 onchange。onchange 将阻止上下文菜单粘贴，并且 onkeyup 将在每次击键时触发。
有关代码示例，请参阅我关于如何在 textArea上施加 maxlength 的答案。
- 对于 Google-Chrome，oninput 就足够了（在版本 22.0.1229.94 m 的 Windows 7 上测试）。
- 对于 IE 9，oninput 将通过上下文菜单和退格键捕获除剪切之外的所有内容。
- 对于 IE 8，除了 oninput 之外，还需要 onpropertychange 来捕获粘贴。
- 对于 IE 9 + 8，需要使用 onkeyup 来捕捉退格。
- 对于 IE 9 + 8，onmousemove 是我发现通过上下文菜单捕捉剪切的唯一方法
未在 Firefox 上测试。
var isIE = /*@cc_on!@*/false; // Note: This line breaks closure compiler...
function SuperDuperFunction() {
// DoSomething
}
function SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally() {
if(isIE) // For Chrome, oninput works as expected
SuperDuperFunction();
}
<textarea id="taSource"
class="taSplitted"
rows="4"
cols="50"
oninput="SuperDuperFunction();"
onpropertychange="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();"
onmousemove="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();"
onkeyup="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();">
Test
</textarea>
我知道这不完全是您的问题，但我认为这可能有用。对于某些应用程序，不是每次按下键时都触发更改功能是很好的。这可以通过这样的事情来实现：
var text = document.createElement('textarea');
text.rows = 10;
text.cols = 40;
document.body.appendChild(text);
text.onkeyup = function(){
var callcount = 0;
var action = function(){
alert('changed');
}
var delayAction = function(action, time){
var expectcallcount = callcount;
var delay = function(){
if(callcount == expectcallcount){
action();
}
}
setTimeout(delay, time);
}
return function(eventtrigger){
++callcount;
delayAction(action, 1200);
}
}();
这通过测试是否在某个延迟期内触发了较新的事件来起作用。祝你好运！
我知道这个问题是特定于 JavaScript 的，但是，似乎没有好的、干净的方法来始终检测当前所有浏览器中的 textarea 何时更改。我了解到 jquery 已经为我们处理好了。它甚至可以处理对文本区域的上下文菜单更改。无论输入类型如何，都使用相同的语法。
$('div.lawyerList').on('change','textarea',function(){
// Change occurred so count chars...
});
或者
$('textarea').on('change',function(){
// Change occurred so count chars...
});