js および jquery の入力ボックス値の oninput および onpropertychange メソッドのリアルタイム監視

この記事の例では、入力ボックスの値をリアルタイムで監視する js および jquery の oninput メソッドと onpropertychange メソッドについて説明します。皆さんの参考に共有してください。詳細は次のとおりです。

私は最近、あるプロジェクトに取り組みました。その要件は、ドロップダウン ボックス内のキーワードを自動的に照合することであり、具体的な詳細は、テキスト ボックスの値の変化をリアルタイムで監視することでした。関連コンテンツと一致します。

最初にプロジェクトを引き継いだとき、最初に考えたのは JQ の変更でしたが、テキスト ボックスがフォーカスを失ったときに変更がトリガーされるため、すぐにこの方法は除外しました。国を救うためにキーダウンを使って解決することを考えました。キーボードではなくマウスを使用してコピー アンド ペーストする場合、このイベントがトリガーされないことを除いて、その他はすべて問題ありません。したがって、この方法も削除されます。

その後、いくつかの関連情報を確認したところ、ネイティブ JS の oninput と onpropertychange だけがこの要件を満たしていることがわかりました。次に、JQ の API にアクセスして、一致するメソッドを見つけられなかったのが残念でしたが、bind で見つかりました。確かに同様のメソッドをバインドします。イベントは input と propertychange です。テストに合格した後は、確かに問題はありません。

ここで例を示します:

JQ:

$('input').bind('input propertychange', function() {
 //进行相关操作
});

その中で: propertychange は IE9 より前のバージョンとの互換性を目的としています。

JS の oninput イベントは、IE9 より前のバージョンではサポートされていません。このイベントは、ユーザー インターフェイスが変更されたとき、またはスクリプトを使用してコンテンツが直接変更されたときにトリガーされます。次の状況:

input:checkbox または input:radio 要素の選択状態が変更され、checked 属性が変更されます。

input:text 要素または textarea 要素の値が変更され、value 属性が変更されます。
select要素の選択項目が変更され、selectedIndex属性が変更されました。
JS:

if(isIE)
{
 document.getElementById("input").onpropertychange = keys();
}
else //需要用addEventListener来注册事件
{
 document.getElementById("input").addEventListener("input", keys, false);
}

この記事が皆さんの JavaScript プログラミング設計に役立つことを願っています。

入力ボックスの値をリアルタイムで監視するための js および jquery の oninput および onpropertychange メソッドに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。