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

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

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

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

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

次に例を示します:

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 プログラミング設計に役立つことを願っています。