web-dev-qa-db-ja.com

htmlテキスト入力onchangeイベント

hTML入力テキストフィールドのテキスト変更を検出するためにテキスト変更イベントを実装する方法はありますか？
キーイベント（キーを押すなど）を使用してこれらをシミュレートすることは可能ですが、実際にはパフォーマンスが悪く難しくありません。より良い方法はありますか？

javascripthtmltextbox
25
user775187

このようなことをしているときは、onKeyUpイベントを使用します。

<script type="text/javascript">
 function bar() {
      //do stuff
 }
<input type="text" name="foo" onKeyUp="return bar()" />

ただし、HTMLイベントを使用したくない場合は、jQuerys .change（）メソッドを使用してみてください。

$('.target').change(function() {
   //do stuff
});

この例では、入力にはクラス「ターゲット」が必要です。

テキストが変更されたときに同じことをしたい複数のテキストボックスがあり、データが必要な場合は、これを行うことができます：

$('.target').change(function(event) {
   //do stuff with the "event" object as the object that called the method
)};

そうすれば、コードを書き換えずに同じクラスを使用する複数のテキストボックスに対して同じコードを使用できます。

32
CaffeinatedCM

onChangeは、後でフォーカスを失うまで発生しません。あらゆる種類の瞬間的な変更を本当に厳しくしたい場合は、次を使用します。

<input
   type       = "text" 
   onchange   = "myHandler();"
   onkeypress = "this.onchange();"
   onpaste    = "this.onchange();"
   oninput    = "this.onchange();"
/>
35
DragonLord

誤解しない限り、onChange属性を使用できます。

<input type="text" onChange="return bar()">

注：FF 3（少なくとも）では、ユーザーが要素から離れた場所をクリックするか、Enterをクリックするか、その他の変更を行ったことを確認するまで呼び出されません。

5
Jonathon