ボタンのエフェクトなど部分的には以前に紹介したが、今回からJavascriptのイベントハンドラとその効果について紹介していきたい。クリックやマウスオーバーなどユーザからのアクションに対して、デザインを変更する、ポップアップを表示するなど動的なレスポンスをする上でイベントハンドラを利用する。今回はonFocus/onBlur, onChangeについて紹介する。
1. onFocus/onBlur
ページやフォーム等にフォーカスが当たったときはonFocus,フォーカスが外れた場合はonBlurを使用する。
input要素に適用した場合
<input type="text" placeholder="E-Mail" onFocus="this.style.background='limegreen'" onBlur="this.style.background='silver'">
上のinputフォームはロード時は白い背景で、入力しようとしてフォーカスした場合に背景がlimegreenに変化し、はずれた場合にsilverに変化する。
<input>タグ内にonFocus=" "という書式で背景を変化させるには"this.style.background='limegreen'"とする。また外れた場合の背景の変化はonBlur="this.style.background='silver'"とする。背景色も含めてのスタイルを変化させるには、this.style.cssのプロパティ名='値'という書式で設定していき、全体的にはスタイルを変更する場合は`イベントハンドラ="this.style.cssのプロパティ名='値'"という形でタグ内に記述する。
onFocus/onBlurのイベントハンドラtext入力以外で、<a>, <area>,<button>, <select>,<textarea>のタグで使用可能なので、他のタグについて使用例を下に示す。
背景色の変化はそれぞれのタグで有用な使い方ではないかもしれないが、動作を統一するためには同じ効果を適用する。
<a href=#top onFocus="this.style.background='limegreen'" onBlur="this.style.background='silver'">Topへ</a>
リンクでTOPに飛ぶと背景色はlimegreenに変わる。他のインプット要素をクリックするとフォーカスが外れて背景色がシルバーになる。
<button type="button" onFocus="this.style.background='limegreen'" onBlur="this.style.background='silver'">ボタン</button>
クリックすることでフォーカスされるので、結果的にonClickと同じ作用をする。ボタン以外の部分をクリックするとフォーカスが外れて背景色がシルバーになる。
<select name="blood" onFocus="this.style.background='limegreen'" onBlur="this.style.background='silver'"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select>
選択するためにクリックすると全体的に背景がlimegreenに変わり、選択するか別のところをクリックすると背景色がシルバーに変わる。
<textarea rows="4" cols="40" onFocus="this.style.background='limegreen'" onBlur="this.style.background='silver'">ここにテキストを入力。</textarea>
複数行のテキスト入力できる<textarea>でも、text入力と同じ動作をする。
2. onChange
フォームの入力値、選択が変更された場合に発生する。onFocus/onBlurと違って何かテキストが入力されないと背景色が変化しない。
<input type="text" placeholder="E-Mail" onChange="this.style.background='limegreen'">
<select>の場合は、最初に表示されている選択肢(下の場合はA)以外を選択すると背景色が変化する。
<select name="blood" onChange="this.style.background='limegreen'"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select>
以下ボタンに適用しても、入力値、選択値が変化するわけではないのは変わらない。イベントハンドラとしてはonClickが妥当な選択となる。
<input type="button" value="ボタン" onChange="this.style.background='limegreen'">
チェックボックスをクリックするごとに値が変更されて、ページ位置がスクロールされる。（チェックボックスは背景色の設定がないので、代わりにwindow.scroll()を使ってページをスクロールさせる動作にしている）
<input type="checkbox" onChange=window.scroll(0,2500)>チェックボックス
ラジオボタンも同様に、ボタンが押されることにより最初の状態から変化してページ位置がスクロールされる。
<p> <input type="radio" name="a" value="a" onChange=window.scroll(0,2500)>A <input type="radio" name="a" value="b">B </p>
A B
3. まとめ
入力フォームの操作時に発生するイベントハンドラとして今回はonFocus/onBlurとonChangeを紹介した。onFocusは入力あるなしに関わらず、onChangeは入力により値が変化したときのみ発生するイベントハンドラとなる。
