web-dev-qa-db-ja.com

jQueryの 'input'イベント

私がこれを見るまで jsfiddle というinputと呼ばれるjQueryのイベントを聞いたことがありません。

なぜそれが機能しているのか知っていますか？それはkeyupのエイリアスですか？

$(document).on('input', 'input:text', function() {});
jqueryeventsinput
188
silkfire

ユーザーインターフェースを介して要素のテキストコンテンツが変更されたときに発生します。

keyupは、キーが何もしなくても起動するため、keyupのエイリアスではありません（たとえば、Controlキーを押してから離すとkeyupイベントが発生します）。

これを考える良い方法は次のとおりです。入力が変わるたびにトリガーされるイベントです。これには、入力を変更するキーを押しても（ただし、Ctrlだけではイベントは発生しませんが、テキストを貼り付けるCtrl-V）、自動補完オプションの選択などが含まれます。中クリックペースト、ドラッグアンドドロップ、その他さまざまな方法でスタイルを設定できます。

詳細については this pageおよびこの回答に対するコメントを参照してください。

178
J David Smith

oninputイベントは入力フィールドの変更を追跡するのに非常に便利です。

ただし、IE version <9ではサポートされていません。ただし、古いIEバージョンには、onpropertychangeと同じ動作をする独自のイベントoninputがあります。

だからあなたはこのようにそれを使うことができます：

$(':input').on('input propertychange');

クロスブラウザを完全にサポートします。

たとえば、disabledプロパティが変更された場合など、任意のプロパティ変更に対してプロパティ変更がトリガされる可能性があるので、これを含める必要があります。

$(':input').on('propertychange input', function (e) {
    var valueChanged = false;

    if (e.type=='propertychange') {
        valueChanged = e.originalEvent.propertyName=='value';
    } else {
        valueChanged = true;
    }
    if (valueChanged) {
        /* Code goes here */
    }
});
148
claustrofob

JQueryを使用すると、次のものは実質的に同じです。

$('a').click(function(){ doSomething(); });
$('a').on('click', function(){ doSomething(); });

しかし、inputイベントでは、私がテストしたブラウザでは2番目のパターンしか動作しないようです。

したがって、これでうまくいくと期待できますが、（少なくとも現在は）そうではありません。

$(':text').input(function(){ doSomething(); });

繰り返しになりますが、イベントの委譲を利用したい場合（たとえば、#containerがDOMに追加される前にinput.textにイベントを設定する場合）、これは頭に浮かぶはずです。

$('#container').on('input', ':text', function(){ doSomething(); });

残念ながら、これは現在は機能しません。

このパターンだけが機能します。

$(':text').on('input', function(){ doSomething(); });

現在の情報と一緒に編集

私は確かにこのパターンを確認することができます：

$('#container').on('input', ':text', function(){ doSomething(); });

今、すべての「標準」ブラウザでも動作します。

11
Ifedi Okonkwo

Claustrofobが言ったように、oninputはIE9 +でサポートされています。

ただし、 、 "oninputイベントはInternet Explorer 9ではバグがあります。文字がユーザーインターフェイスを介してテキストフィールドから削除された場合にのみ発生します。 onpropertychangeイベントはInternet Explorer 9でサポートされていますが、oninputイベントと同様にバグがありますが、削除時には発生しません。

文字を削除する方法はいくつかあります（[Backspace]キーと[Delete]キー、コンテキストメニューの[Ctrl] + [X]、[Cut]と[Delete]コマンド）、すべての変更を検出するのに適した方法はありません。コンテキストメニューの[削除]コマンドを使用して文字を削除すると、Internet Explorer 9のJavaScriptで変更が検出されません。 "

私は入力とキー入力（そしてBackspaceキーを押しながらIEの中で起動させたいのであればキーダウン）の両方に結びついた良い結果を得ています。

2
Zook

INPUTを使用しながら注意してください。このイベントはIE 11のフォーカスとぼかしで発生します。ただし、他のブラウザの変更時に発生します。

https://connect.Microsoft.com/JP/feedback/details/810538/ie-11-fires-input-event-on-focus

2
Ananda Naphade

私は、 'input'がDOMレベルOイベントモデルの 'oninput'と同じように、ここで単純に機能すると思います。

ちなみに：

Silkfireがそれをコメントしたように、私も「jQuery入力イベント」のためにグーグルしました。したがって、私はここに導かれ、 'input'がjqueryのbind（）コマンドに受け入れ可能なパラメータであることを知って驚きました。 InjQuery in Action（p。102、2008 ed。） 'input'は起こりうるイベントとして言及されていません（他の20人に対して、 'blur'から 'unload'まで）。 pに、それは本当です。図９２に示すように、その逆は、再読（すなわち、レベル０とレベル２のモデルの間の異なる文字列識別子への参照から）から推測され得る。それは非常に誤解を招きやすいです。

1
Brice Coustillas

jQueryの.on()メソッドのシグネチャは次のとおりです。.on( events [, selector ] [, data ], handler )

イベントは、この参照にリストされているもののいずれかです。

https://developer.mozilla.org/en-US/docs/Web/Events

ただし、それらがすべてのブラウザですべてサポートされているわけではありません。

Mozillaは入力イベントについて次のように述べています。

DOM入力イベントは、or要素の値が変更されたときに同期的に発生します。さらに、内容が変更されたときには満足できる編集者に発火します。

0
Robert Rocha