JavaScriptにおけるonfocusとonblurイベントハンドラ
JavaScriptにおけるonfocusとonblurイベントハンドラ
このページでは、JavaScriptのイベントハンドラであるonfocusとonblurについて詳しく解説します。各項目はリンクからジャンプできます。
onfocusとは
onfocusは、HTML要素がフォーカスを受け取ったときに発火するイベントハンドラです。主にフォーム要素（<input>, <textarea>など）で使用されます。
例えば、ユーザーがテキストボックスをクリックしたり、タブキーでその要素に移動した際に発動します。
onblurとは
onblurは、HTML要素がフォーカスを失ったときに発火するイベントハンドラです。これもフォーム要素でよく使用されます。
例えば、ユーザーがテキストボックスから他の要素に移動する際に発動します。
onfocusの具体例
以下はonfocusを使った例です。
例1: テキストボックスの背景色を変更
<input type="text" onfocus="this.style.backgroundColor='yellow';" placeholder="フォーカスしてみてください">
このコードでは、テキストボックスがフォーカスを受けると背景色が黄色に変わります。
例2: ログにメッセージを記録
<input type="text" onfocus="console.log('フォーカスされました');" placeholder="コンソールを確認してください">
フォーカスされるたびにコンソールにメッセージが記録されます。
onblurの具体例
以下はonblurを使った例です。
例1: テキストボックスの背景色をリセット
<input type="text" onblur="this.style.backgroundColor='';" placeholder="フォーカスを外してみてください">
このコードでは、テキストボックスがフォーカスを失うと背景色がリセットされます。
例2: 入力値のバリデーション
<input type="text" onblur="validateInput(this)" placeholder="メールアドレスを入力してください">
<script>
function validateInput(input) {
if (!input.value.includes('@')) {
alert('メールアドレスが正しくありません');
}
}
</script>
フォーカスが外れたときに入力値がメールアドレスとして有効かどうかをチェックします。
onfocusとonblurの組み合わせ例
onfocusとonblurを組み合わせると、より複雑なインタラクションを実現できます。
例1: フォーカス時に背景色を変え、フォーカスが外れたら元に戻す
<input type="text"
onfocus="this.style.backgroundColor='lightblue';"
onblur="this.style.backgroundColor='';"
placeholder="試してみてください">
このコードでは、フォーカス時に背景色が青に変わり、フォーカスが外れると元に戻ります。
例2: 入力値のリアルタイムヒント
<input type="text" id="username" onfocus="showHint()" onblur="hideHint()" placeholder="ユーザー名を入力してください">
<div id="hint" style="display:none;">ユーザー名は英数字で入力してください</div>
<script>
function showHint() {
document.getElementById('hint').style.display = 'block';
}
function hideHint() {
document.getElementById('hint').style.display = 'none';
}
</script>
フォーカス時にヒントが表示され、フォーカスが外れると非表示になります。
まとめ
onfocusとonblurは、フォーム要素を操作する際に非常に便利なイベントハンドラです。ユーザーエクスペリエンスを向上させるために、これらを組み合わせて動的なインターフェイスを構築することができます。