ブログデザイン備忘録 ~イベントハンドラ2

　前回に引き続きJavascriptのイベントハンドラとその効果について紹介していきたい。今回はonSelect/onSelectStart, onClic/onDblClick, onKeyDown/onKeyUp/onKeyPressについて効果について示す。javascritptのイベントハンドラの紹介や、実装した効果についてページ内に示しているが、ブラウザによって適用できないものがある。(Windows10 chromeでは検証している）

atatat.hatenablog.com

1. onSelect/onSelectStart

onSelectはテキストが選択された場合に発生するイベントでinput要素とtextarea要素で有効。input要素はテキスト入力以外は使い道がないと思う。 テキストボックスで利用する場合は以下のようになる。

<input type="text" value="test" onselect="this.style.background='limegreen'" onBlur="this.style.background='white'">

テキストを選択状態にすると背景色がlimegreenに変わるようにしている。はずれたときに元に戻すにはonBlurで背景色を白にするようにしている。(何か設定しないと元に戻らない) テキストボックスとほぼ同じだが、textare要素に適用した場合も下に示す。

<textarea  rows="4" cols="40" onselect="this.style.background='limegreen'" onBlur="this.style.background='white'">ここにテキストを入力。</textarea>

ここにテキストを入力。

　次にonSelectStartはテキスト選択を開始した瞬間に発生するイベントで、テキストをコピー&ペースト禁止にするような場合に使用される。例えば

<div onselectstart="return false;">選択できないテキスト</div>

選択できないテキスト

"return false"でテキスト選択を禁止しているため、テキストが選択状態にならない。

2. 機能だけ紹介するイベントハンドラ

onSubmit/onReset

　データ送信先が必要なためはてなブログ上では実行できないが機能だけ紹介しておく。いずれもform要素のみ有効で、onSubmitは送信ボタン <input type="submit" value="送信" >が押された場合に発生するイベント。onResetは同様にresetボタン<input type="reset" value="リセット">が押された場合の発生するイベントとなる。

onAbort/onError

　onAbortは画像の読み込みを中断した場合に発生するイベント。onErrorは画像の読み込み中にエラーが生じた場合に発生するイベント。最近は通信が途切れていない限り、画像は一瞬で読み込まれるがブロードバンド前（電話回線やISDN)の時代では画像が重くて読み込みできないということがしばしばあった。

onLoad/onUnload

　onLoadはページの読み込みが完了したときに発生するイベントで、onUnloadはウィンドウを閉じる、他ページに切り替える、ページを更新するときに発生するイベント

3. onClick/onDblClick

　以前何度か登場しているがonClickはクリック時に発生するイベントで、onDblClickはダブルクリック時に発生するイベントとなる。

下の例はボタンをクリックするとボタンの背景色はlimegreenに、ダブルクリックすると白になるようにしている。

 <input type="button"  value="クリック" onclick="this.style.background='limegreen';" ondblclick="this.style.background='white';">

4. onKeyDown/onKeyUp/onKeyPress

　onKeyDownはキーが押されたとき、onKeyUpは押されたキーが上がった時、onKeyPressはキーが押されているときに発生するイベント。 以下テキストボックスを例にそれぞれのイベントが発生したときに背景色がlimegreenに変わるようにしているが、キーの動作によって色が変わるタイミングが若干異なることが確認できると思う。

キーが押された時:

<input type="text" onkeydown="this.style.background='limegreen'" onBlur="this.style.background='white'">

押されたキーが上がった時:

<input type="text" onkeyup="this.style.background='limegreen'" onBlur="this.style.background='white'">

キーが押されている時:

<input type="text" onkeypress="this.style.background='limegreen'" onBlur="this.style.background='white'">

5. まとめ

　今回はテキスト選択に関するonSelect/onSelectStart、クリックに関するonClick/onDblClick、キー入力に関するonKeyDown/onKeyUp/onKeyPressについて動作とともに紹介した。また機能だけの紹介になったが、フォーム送信に関するonSubmit/onReset、読み込み処理に関してonAbort/onError/onLoad/onUnLoadについて紹介した。