Textarea onchange检测
如何使用JavaScript检测textarea上的更改事件？
我正在尝试检测您input的剩余字符数。
我尝试使用onchange事件，但似乎只在焦点不在时才踢。
你将需要使用onkeyup 和 onchange这个。 onchange会阻止上下文菜单粘贴，onkeyup会触发每个按键。
查看我的答案如何强加文本区域的最大长度代码示例。
到了2012年，后PC时代已经到来，我们仍然不得不与这样的基础斗争。 这应该是非常简单的 。
在梦想实现之前，下面是跨浏览器的最好方法： 使用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，铬，歌剧和Safari ， onpropertychange照顾IE8 （它也与IE6和7，但也有一些错误）。
使用input和onpropertychange的优点是不会不必要地触发（如按Ctrl或Shift键时）。 所以如果你希望在textarea内容改变的时候运行一个相对昂贵的操作，这是要走的路 。
现在，IE一如既往地做了一半的工作来支持这个function：当从textarea中删除字符时，在IE中不会触发input和onpropertychange 。 所以，如果你需要处理删除IE中的字符，使用keypress （而不是使用keyup / keydown ，因为即使用户按下并保持按键，它们只会触发一次）。
资料来源： http : //www.alistapart.com/articles/expanding-text-areas-made-elegant/
编辑：它似乎甚至上述解决scheme是不完美的，正如在评论中指出的：textarea上的addEventListener属性的存在并不意味着你正在使用一个理智的浏览器; 类似地， attachEvent属性的存在并不意味着IE。 如果你想让你的代码非常密切，你应该考虑改变它。 请参阅Tim Down对于指针的评论 。
- 对于谷歌浏览器，oninput将是足够的（testing在Windows 7版本22.0.1229.94米）。
- 对于IE 9，oninput将捕获除了通过contextmenu和backspace的切割。
- 对于IE 8，onpropertychange除了oninput外还需要粘贴。
- 对于IE 9 + 8，onkeyup需要回退。
- 对于IE 9 + 8，onmousemove是我发现通过contextmenu来切割的唯一方法
未在Firefox上testing。
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); } }();
这是通过testing一个更近的事件是否在特定的延迟时间内被触发来工作的。 祝你好运！
我知道这个问题是特定于JavaScript，但是，似乎没有一个好的，干净的方式总是检测当所有当前浏览器textarea更改。 我已经知道了jquery已经为我们照顾了它。 它甚至处理文本区域的上下文菜单更改。 无论inputtypes如何，都使用相同的语法。
$('div.lawyerList').on('change','textarea',function(){ // Change occurred so count chars... });
要么
$('textarea').on('change',function(){ // Change occurred so count chars... });
你有没有看过onkeyup ？
使自己容易，并使用像jQuery.maxlength jQuery插件。 教程在http://www.anon-design.se/demo/maxlength-with-jquery 。
代码我已经用于IE 11没有jQuery和只为一个单一的textarea：
使用Javascript：
// Impede que o comentário tenha mais de num_max caracteres var internalChange= 0; // important, prevent reenter function limit_char(max) { if (internalChange == 1) { internalChange= 0; return; } internalChange= 1; // <form> and <textarea> are the ID's of your form and textarea objects <form>.<textarea>.value= <form>.<textarea>.value.substring(0,max); }
和html：
<TEXTAREA onpropertychange='limit_char(5)' ...
如果与HTML5inputvalidation/模式属性配对，则键盘应该就足够了。 因此，创build一个模式（正则expression式）来validationinput，并根据.checkValidity（）状态进行操作。 像下面的东西可以工作。 在你的情况下，你会想要一个正则expression式来匹配长度。 我的解决scheme是在线使用/演示。
<input type="text" pattern="[a-zA-Z]+" id="my-input"> var myInput = document.getElementById = "my-input"; myInput.addEventListener("keyup", function(){ if(!this.checkValidity() || !this.value){ submitButton.disabled = true; } else { submitButton.disabled = false; } });
试试这个。 这很简单，因为它是2016年，我相信它将在大多数浏览器上工作。
<textarea id="text" cols="50" rows="5" onkeyup="check()" maxlength="15"></textarea> <div><span id="spn"></span> characters left</div> function check(){ var string = document.getElementById("url").value var left = 15 - string.length; document.getElementById("spn").innerHTML = left; }
你可以做的最好的事情是设置一个函数在给定的时间内被调用，这个函数检查你的textarea的内容。
self.setInterval('checkTextAreaValue()', 50);
