達成される効果 多くの場合、Web サイトのユーザー エクスペリエンスを向上させるために閲覧者を誘導するためのアクションを即座に実行するために、入力ボックスの値の変化をリアルタイムで監視します。例えば、入力ボックスに入力されたバイト数を瞬時に表示したり、Googleの関連検索効果である検索誘導のために入力された値を瞬時に読み取ったりすることができます。
瞬間的な出来事を捉えることができれば、多くのことが可能になります。
知っておくべきこと まず、onchange と onpropertychange の違いを理解する必要があります。
IE では、HTML 要素の属性が変更されると、次のようになります。 onpropertychange を通じて即座にキャプチャされます。
onchange では、属性値が変更されたときにイベントがアクティブ化される前に、現在の要素がフォーカスを失う (onblur) 必要があります。
これを理解した後、onpropertychange の効果が必要なものであることがわかりましたが、残念ながら、それは IE でのみ機能します。 onpropertychange を置き換える別の時間を見つけることはできますか?
情報を読んだ後、oninput イベントを使用して他のブラウザでも同じ効果を実現できることがわかりました。これは、IE ブラウザを区別するだけで済みます。
oninput の使い方 登録時刻をページに直接記述する場合、次のような記述方法が実現できます。
ただし、oninputをJSコードで書いて区切る場合は、通常のイベント登録方法とは若干異なります。登録にはaddEventListenerを使用する必要があります。
attachEvent と addEventListener の違い そうは言っても、attachEvent と addEventListener の使い方を見てみましょう。
attachEvent メソッドは、他の処理イベントを特定のイベントに添付します。 (Mozilla シリーズはサポートされていません)
Mozilla シリーズでは addEventListener メソッドが使用されます
例:
document.getElementById("btn").onclick = method1;
document.getElementById("btn")。 onclick = method2;
document.getElementById("btn").onclick = method3;
このように記述すると、medhot3 のみが実行されます
次のように記述します: var btn1Obj = document.getElementById("btn1");
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick"); ,method3) ;
実行順序は、method3->method2->method1
Mozilla シリーズの場合、このメソッドはサポートされていないため、addEventListener を使用する必要があります
var btn1Obj = document.getElementById ("btn1");
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false); ,false);
実行順序は、method1->method2->method3
addEventListener を使用して oninput イベントを登録する方法を理解した後、解決すべき問題 [ブラウザの分割] に戻ります。
IEブラウザを判断する
IEの見分け方は？ 1 つはブラウザの機能属性を判断することです。
2 つ目は、従来のユーザー エージェント文字列を判断することです。これはおそらく最も古く、最も一般的な検出方法です。
ここでは詳細は説明しません。
if("v"=="v") {
alert("IE")
コードをコピーします
コードは次のとおりです: < ;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"< html xmlns="http://www.w3.org/1999/xhtml">
入力ボックスの値の即時変更を監視します onpropertychange oninput ページに直接記述する例:
< ;input type="text" name="textfield" oninput="document.getElementById('webtest').innerHTML=this.value;" onpropertychange="document.getElementById('webtest').innerHTML=this.value ;" />
入力した値は次のとおりです: まだ入力されていません
< ; br />
JS で記述した例:
gt;
入力した値は次のとおりです: まだ入力されていません gt;
