☰

テキストエリアの変更検出 質問する

tag-icon • tag-icon javascript
テキストエリアの変更検出 質問する

JavaScript を使用してテキストエリアの変更イベントを検出するにはどうすればよいでしょうか?
入力時に使用可能な残りの文字数を検出しようとしています。

onchange イベントを使用しようとしましたが、フォーカスが外れたときにのみ実行されるようです。

ベストアンサー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、Safari、そしてonpropertychange世話をするIE8(IE6 および 7 でも動作しますが、いくつかバグがあります)。

inputとを使用する利点は、（またはキーを押したときのように）onpropertychange不必要に作動しないことです。CtrlShiftテキストエリアの内容が変更されたときに比較的コストのかかる操作を実行したい場合は、これが最適な方法です。。

IEは相変わらず、これを中途半端にしかサポートしていません。IEinputではonpropertychange、文字が削除されましたテキストエリアから。したがって、IE で文字の削除を処理する必要がある場合は、 を使用します( / をkeypress使用するのではなく、ユーザーがキーを押して保持した場合でも 1 回しか実行されないため)。keyupkeydown

ソース：http://www.alistapart.com/articles/expanding-text-areas-made-elegant/

編集：コメントで正しく指摘されているように、上記の解決策でさえ完璧ではないようです。addEventListenerテキストエリアにプロパティが存在すると、ない正常なブラウザで作業していることを意味します。同様に、attachEventプロパティの存在はないIEを暗示しています。コードを本当に完璧にしたい場合は、変更を検討する必要があります。ティム・ダウンのコメントポインタ用。

おすすめ記事