HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのonfocusイベント属性とは？使い方とサンプルコードを徹底解説

onfocusイベント属性とは

HTMLのonfocusイベント属性は、HTMLドキュメント内の要素がフォーカスを受け取った瞬間にJavaScriptを実行するためのイベント属性です。

ユーザーが入力フィールドをクリックしたときや、Tabキーで要素間を移動して選択したときなどに発火します。フォーム要素のハイライト表示や、入力時のガイドメッセージ表示など、ユーザーインターフェースを向上させるさまざまな場面で活用されています。

onfocusはグローバルイベント属性として多くのHTML要素で利用できますが、特にinput、textarea、selectといったフォーム関連要素でよく使われる傾向があります。

構文（シンタックス）

onfocusイベント属性の基本的な構文は以下のとおりです。

<tagname onfocus="script"></tagname>

対象となるタグにonfocus属性を指定し、値として実行したいJavaScriptのコードまたは関数名を記述します。

使用例

それでは、実際にonfocusイベント属性を使ったサンプルを見てみましょう。この例では、テキストエリアがフォーカスされたタイミングで背景色が変化する仕組みを実装しています。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
        padding: 20px;
    }
    textarea {
        border: 2px solid #fff;
        background: transparent;
        font-size: 1rem;
    }
    ::placeholder {
        color: #000;
        font-size: 1rem;
    }
</style>
</head>
<body>
<h1>HTML onfocus Event Attribute Demo</h1>
<textarea placeholder="Enter your message here" onfocus="focusFn()" rows='8' cols="50"></textarea>
<script>
    function focusFn() {
        document.querySelector('textarea').style.background = '#ffffff36';
    }
</script>
</body>
</html>

コードのポイント

  • <textarea>要素にonfocus="focusFn()"を指定し、フォーカス時にfocusFn()関数を呼び出しています。
  • focusFn()関数内では、document.querySelector()でテキストエリアを取得し、背景色を半透明の白（#ffffff36）に変更しています。

実行結果

上記のコードをブラウザで開くと、次のような画面が表示されます。

HTMLのonfocusイベント属性とは？使い方とサンプルコードを徹底解説

次に、テキストエリアをクリックしてメッセージを入力してみてください。フォーカスされた瞬間にonfocusイベントが発火し、テキストエリアの背景色が変化することが確認できます。

HTMLのonfocusイベント属性とは？使い方とサンプルコードを徹底解説

まとめ

onfocusイベント属性を使うことで、要素がフォーカスされたタイミングに合わせた動的な処理を簡単に実装できます。フォームのユーザビリティ向上やインタラクティブな演出など、ぜひ実際のWeb制作でも活用してみてください。

  1. HTML ondragendイベント属性の使い方を徹底解説

    ondragendイベント属性とはHTMLのondragendイベント属性は、HTMLドキュメント内でユーザーが要素やテキストのドラッグを終了した時点で発生するイベントです。ドラッグ&ドロップ操作の一連の流れの最後に実行されるため、ドラッグ完了後の処理(メッセージの表示や状態の更新など)を実装するのに便利です。なお、ondragendイベントはドラッグ元の要素に対して発生する点に注意してください。ドロップ先の要素で発生するのは「drop」イベントであり、役割が異なります。構文ondragendイベント属性の基本的な構文は以下のとおりです。<tagname ondragend=&q

  2. HTMLのonpageshowイベント属性とは？使い方をサンプルコード付きで解説

    HTMLのonpageshowイベント属性は、ユーザーがWebページへ移動（ナビゲート）したときに発生するイベントです。ページが最初に読み込まれたときはもちろん、ブラウザの「戻る」ボタンなどでキャッシュからページが再表示されたときにも発火する点が大きな特徴です。 構文 onpageshowイベント属性の基本構文は次のとおりです。 <body onpageshow="script"></body> HTML onpageshowイベント属性のサンプル ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。 サンプルコード