4

テキストエリア要素があり、入力中にテキストエリアの上に書かれた文字数を出力したいと考えています。HTML は次のようになります。

<p id="counter"></p>
<textarea id="text"></textarea>

そしてJavaScript：

jQuery( "#text" ).change( function(){
    var numberOfChars = jQuery( "#text" ).val().length;
    jQuery( "#counter" ).html( numberOfChars );
});

しかし、カウンターは、テキストエリアの外側をクリックしたときにのみ「更新」されます。何故ですか？書いているときにその場でカウンターを更新したい。

4

4 に答える 4

11

これは、変更イベントの既知の動作です。要素がフォーカスを失うまで発火しません。ドキュメントから：

change イベントは、値が変更されたときに要素に送信されます。このイベントは、要素、ボックス、および要素に限定されます。選択ボックス、チェックボックス、およびラジオ ボタンの場合、ユーザーがマウスで選択を行うとすぐにイベントが発生しますが、他の要素タイプの場合、要素がフォーカスを失うまでイベントは延期されます。

代わりに、スクリプトを keyup にバインドします (他のキー イベントを使用することもできますが、このコンテキストでは up が最も理にかなっています)。

jQuery( "#text" ).keyup(function(){
    var numberOfChars = jQuery( "#text" ).val().length;
    jQuery( "#counter" ).html( numberOfChars );
});
于 2012-03-05T13:58:25.353 に答える
1

changeの代わりにkeyupイベントを使用してみてください。実際に見てみましょう: http://jsfiddle.net/ren4A/1/

于 2012-03-05T13:58:11.087 に答える
1

.on('keyup') または .on('keypress') または .on('keydown') を試してください

于 2012-03-05T13:58:20.680 に答える
1 

$('input#myId').bind('input', function() {
  //some code
});

キーアップ イベントを検出し、マウスでデータを貼り付けることができます...

于 2019-07-29T08:15:41.753 に答える