回答:
あなたは使用する必要がありますonkeyup し、 onchangeこのために。onchangeはコンテキストメニューの貼り付けを防ぎ、onkeyupはすべてのキーストロークに対して起動します。
コードサンプルについては、textAreaにmaxlengthを課す方法に関する私の回答を参照してください。
onkeyup入力検出のひどいイベントです。oninputand onpropertychange（IEサポート用）を使用します。
onchangeれませコンテキストメニューカット/ペーストが発生したときに発生します。
それは2012年、ポストPCの時代が到来した今でも、これと同じくらい基本的なものと格闘する必要があります。これは非常に単純なはずです。
その夢が実現するような時まで、これを実行する最良の方法は、クロスブラウザです。とイベントの組み合わせを使用してinputonpropertychange、次のようにします。
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はいつものように、これをサポートするという半端な仕事をします。テキストエリアから文字が削除されてもIE inputでonpropertychange起動したり、起動したりすることはありません。したがって、IEで文字の削除を処理する必要がある場合は、を使用します（ユーザーがキーを押し続けても1回だけ起動されるため、/ を使用するのではなく）。keypresskeyupkeydown
出典：http : //www.alistapart.com/articles/expanding-text-areas-made-elegant/
編集：コメントで正しく指摘されているように、上記のソリューションでさえ完璧でaddEventListenerはないようです。textareaにプロパティが存在しても、正常なブラウザで作業しているとは限りません。同様に、attachEventプロパティの存在はIEを意味しません。コードを完全に気密にしたい場合は、変更することを検討してください。ポインタについては、Tim Downのコメントを参照してください。
oninputこれは私たちがこれを行うべき方法ですが、おそらくaddEventListenerあなたはブラウザサポートのテストとして使用すべきではありません。いずれにしても+1。
keypressIE9でそのケースを処理するためにイベントを使用することも提案している理由です（そしておそらくそれ以降のバージョンも）。
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...
});bind("input cut paste"...、それは魅力のように機能します-入力、キーボードまたはコンテキストメニューを使用したカットアンドペースト; テキストのドラッグ/ドロップもできます。
changeイベントを起動しませんtextarea。
textareaの変更に関するイベントをリッスンし、必要に応じて変更を行うことができます。一例を示します。
(() => {
const textArea = document.getElementById('my_text_area');
textArea.addEventListener('input', () => {
let textLn = textArea.value.length;
if(textLn >= 100) {
textArea.style.fontSize = '10pt';
}
})
})()<html>
<textarea id='my_text_area' rows="4" cols="50" style="font-size:40pt">
This text will change font after 100.
</textarea>
</html>HTML5の入力検証/パターン属性と組み合わせる場合は、キーアップで十分です。したがって、入力を検証して.checkValidity（）ステータスに基づいて動作するパターン（正規表現）を作成します。以下のようなものが機能する可能性があります。あなたの場合、あなたは正規表現が長さに一致することを望みます。私のソリューションはここでオンラインで使用/デモ可能です。
<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;
}
});私がjqueryを使用せずに単一のtextareaだけでIE 11に使用したコード：
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)' ...これを試してみてください。シンプルで、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);