html入力のイコールチェンジイベントのリスナーを追加する
実現したい効果
多くの場合、入力ボックスの値の変化をオンザフライで聞き取り、視聴者を誘導したり、サイトのユーザー体験を向上させるためのアクションを即座に取ることができるようにしています。例えば、入力ボックスに入力されたバイト数を即座に表示したり、入力された値を即座に読み取って検索を誘導したり(例: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 メソッド
<スパン
例
- document.getElementByIdx_x_x("btn") .オンクリック = メソッド1 ;
- document.getElementByIdx_x_x("btn") .オンクリック = メソッド2 ;
- document.getElementByIdx_x_x("btn") .オンクリック = メソッド3 ;
このように書くと、medhot3だけが実行されます
このように書きます。
- ヴァル btn1Obj = ドキュメント .getElementByIdx_x_x("btn1") を参照してください。
- <スパン
- btn1Obj.attachEvent("onclick",method1);
- <スパン
- btn1Obj.attachEvent("onclick",method2);
- <スパン
- btn1Obj.attachEvent("onclick",method3);
実行順序は、method3->method2->method1です。
Mozilla系であれば、この方法はサポートされていないので、addEventListenerを使う必要があります。
- ヴァル btn1Obj = ドキュメント .getElementByIdx_x_x("btn1") を参照してください。
- <スパン
- btn1Obj.addEventListener("click",method1,false) を追加しました。
- <スパン
- btn1Obj.addEventListener("click",method2,false) を追加しました。
- <スパン
- btn1Obj.addEventListener("click",method3,false) を追加しました。
- <スパン
- 実行順序はmethod1-です。 > メソッド2 > メソッド3
addEventListener を使って oninput イベントを登録する方法を理解したところで、解決すべき問題 [ブラウザの分割] に戻ります。
インターネットエクスプローラーの判定
IEを他と区別する方法は?
これは決まりきった質問のようで、ウェブ上では2つのカテゴリーに分類され、その見つけ方がたくさんあります。
そのひとつは、ブラウザの機能特性を見極めることです。
2つ目は、おそらく最も古く、最も一般的な方法である、従来のユーザーエージェント文字列を判別する方法です。
ここでは深入りせずに、もっと簡単な方法で判断してみましょう。
- <スパン if("\v"=="v") {。
- <スパン
- alert("IE");
- }else{
- アラート("NO")。
- <スパン
- }
ここまでで、私たちは遭遇した問題を解決し、私たちのアイデアがうまくいくかどうかをテストするためにコードを書き始めました。
私がお伝えしたいことは、これだけです。参考にしていただき、ぜひスクリプトハウスを応援していただければと思います。
元記事のアドレスです。 http://www.web600.net/html/editor/JavaScript/201001131529.html
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
HTMLのブロックレベル要素と行レベル要素、特殊文字、ネストルール
-
互換性を保ちながら、iframeを使って相手ページのデータを適用する方法
-
src または css の背景画像の url 値を base64 でエンコードしたコード
-
HTMLのテキスト外表示省略... テキストオーバーフローの実装
-
テーブル関連の仕上げとJavascriptによるtable,tr,tdの操作について
-
HTML theadタグの定義と使い方の詳細
-
xml構文詳細
-
IE9ベータ版のブラウザがHTML5/CSS3に対応
-
デザイナーはコードを書くことを学ぶ必要があるのか?
-
共通するイベントやメソッドをhtmlテキストで詳しく解説