1. ホーム
  2. Web制作
  3. HTML/Xhtml

html入力のイコールチェンジイベントのリスナーを追加する

2022-02-05 05:34:53

実現したい効果
多くの場合、入力ボックスの値の変化をオンザフライで聞き取り、視聴者を誘導したり、サイトのユーザー体験を向上させるためのアクションを即座に取ることができるようにしています。例えば、入力ボックスに入力されたバイト数を即座に表示したり、入力された値を即座に読み取って検索を誘導したり(例:googleのLinked Search効果)することができます。
<スパン ライブイベントをキャプチャーできれば、いろいろなことができる。
知っておきたいこと
<スパン まず、知る必要があるのは オンチェンジ オンプロパティ変更 との違いは
IEでは、HTML要素のプロパティが変更されると、onpropertychangeで即座にキャッチされます。
イベントをアクティブにするには、プロパティ値が変更されたときに、onchange によって現在の要素のフォーカスが失われる (onblur) ようにする必要があります。
これを理解した上で、onpropertychangeが私たちの望む効果を発揮することがわかりましたが、残念ながらIEでしか機能しません。onpropertychangeを置き換えるために別の時間を見つけることができますか?
<スパン 情報に目を通した後、私は、その その他のブラウザー の下で使用することができます。 オンインプット イベントで同じ効果を得ることができます。これは素晴らしいことで、IE ブラウザを区別する必要があるだけです。
oninputの使用
ここで、oninputの使い方を簡単に説明します。
 もし、ページ内に直接登録時間を書くのであれば、以下のような書き方で大丈夫です。
<,input type="text" name="textfield" oninput="alert(this.value);" onpropertychange="alert(this.value)" />
ただし、JSのコードからoninputを書き出すのは、通常のイベント登録の方法とは少し異なり、addEventListenerを使って行う必要があります。
attachEventとaddEventListenerの違いについて
ということで、attachEventとaddEventListenerの使い方を確認しましょう。
attachEvent メソッドで、イベントに他の処理イベントを付加することができます。(Mozillaファミリーは未対応)
Mozilla ファミリーの addEventListener メソッド
<スパン 例

XML/HTMLコード 内容をクリップボードにコピーする
  1. document.getElementByIdx_x_x("btn") .オンクリック  =  メソッド1 ;   
  2. document.getElementByIdx_x_x("btn") .オンクリック  =  メソッド2 ;   
  3. document.getElementByIdx_x_x("btn") .オンクリック  =  メソッド3 ;   

このように書くと、medhot3だけが実行されます

このように書きます。

XML/HTMLコード 内容をクリップボードにコピーする
  1. ヴァル  btn1Obj  =  ドキュメント .getElementByIdx_x_x("btn1") を参照してください。  
  2. <スパン
  3. btn1Obj.attachEvent("onclick",method1);   
  4. <スパン
  5. btn1Obj.attachEvent("onclick",method2);   
  6. <スパン
  7. btn1Obj.attachEvent("onclick",method3);    

実行順序は、method3->method2->method1です。

Mozilla系であれば、この方法はサポートされていないので、addEventListenerを使う必要があります。

XML/HTMLコード 内容をクリップボードにコピーする
  1. ヴァル  btn1Obj  =  ドキュメント .getElementByIdx_x_x("btn1") を参照してください。  
  2. <スパン
  3. btn1Obj.addEventListener("click",method1,false) を追加しました。  
  4. <スパン
  5. btn1Obj.addEventListener("click",method2,false) を追加しました。  
  6. <スパン
  7. btn1Obj.addEventListener("click",method3,false) を追加しました。  
  8. <スパン
  9. 実行順序はmethod1-です。 > メソッド2 > メソッド3    

addEventListener を使って oninput イベントを登録する方法を理解したところで、解決すべき問題 [ブラウザの分割] に戻ります。

インターネットエクスプローラーの判定

IEを他と区別する方法は?
これは決まりきった質問のようで、ウェブ上では2つのカテゴリーに分類され、その見つけ方がたくさんあります。
そのひとつは、ブラウザの機能特性を見極めることです。
2つ目は、おそらく最も古く、最も一般的な方法である、従来のユーザーエージェント文字列を判別する方法です。
ここでは深入りせずに、もっと簡単な方法で判断してみましょう。

XML/HTMLコード 内容をクリップボードにコピーする
  1. <スパン if("\v"=="v") {。  
  2. <スパン
  3.   alert("IE");   
  4. }else{   
  5.   アラート("NO")。  
  6. <スパン
  7. }   

ここまでで、私たちは遭遇した問題を解決し、私たちのアイデアがうまくいくかどうかをテストするためにコードを書き始めました。

私がお伝えしたいことは、これだけです。参考にしていただき、ぜひスクリプトハウスを応援していただければと思います。

元記事のアドレスです。 http://www.web600.net/html/editor/JavaScript/201001131529.html