js は入力ボックスの値の瞬時の変更を監視します onpropertychange、oninput

js は入力ボックスの値の瞬時の変更を監視します onpropertychange、oninput_javascript スキル

WBOY

リリース： 2016-05-16 18:04:47

オリジナル

992 人が閲覧しました

達成される効果
多くの場合、Web サイトのユーザーエクスペリエンスを向上させるために閲覧者を誘導するためのアクションを即座に実行するために、入力ボックスの値の変化をリアルタイムで監視します。例えば、入力ボックスに入力されたバイト数を瞬時に表示したり、Googleの関連検索効果である検索誘導のために入力された値を瞬時に読み取ったりすることができます。
瞬間的な出来事を捉えることができれば、多くのことが可能になります。
知っておくべきこと
まず、onchange と onpropertychange の違いを理解する必要があります。
IE では、HTML 要素の属性が変更されると、次のようになります。 onpropertychange を通じて即座にキャプチャされます。
onchange では、属性値が変更されたときにイベントがアクティブ化される前に、現在の要素がフォーカスを失う (onblur) 必要があります。
これを理解した後、onpropertychange の効果が必要なものであることがわかりましたが、残念ながら、それは IE でのみ機能します。 onpropertychange を置き換える別の時間を見つけることはできますか?
情報を読んだ後、oninput イベントを使用して他のブラウザでも同じ効果を実現できることがわかりました。これは、IE ブラウザを区別するだけで済みます。
oninput の使い方
まずは 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の見分け方は？
これはよくある質問のようですが、インターネット上でそれを見つける方法はたくさんあります。それらは 2 つのカテゴリに分類されます。1 つはブラウザの機能属性を判断することです。
2 つ目は、従来のユーザーエージェント文字列を判断することです。これはおそらく最も古く、最も一般的な検出方法です。
ここでは詳細は説明しません。

コードをコピーコードを次のように判断します。

if("v"=="v") {

alert("IE") 
}else{ 
alert("NO"); 

 
これまでに遭遇した問題は解決されたので、私たちのアイデアが実現できるかどうかをテストするためにコードを書き始めました。 
 コードを完成させます: 

コードをコピーしますコードは次のとおりです: < ;!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;

とても美しいので完成させてください一度、上記のコードをプレビューし、2 つの方法でページに実装します。1 つ目はページ内での直接参照、2 つ目は JS での参照です。
テスト済みおよび互換性: IE6、IE7、IE8、Firefox、Opera、Chrome、Safari