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

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

HTMLのonblur属性は、HTML要素がフォーカスを失った（blurした）瞬間にJavaScriptを実行するためのイベント属性です。ユーザーがボタンやテキスト入力欄などから別の場所へクリックやタブ移動で離れたタイミングを検出できるため、入力チェックやメッセージ表示など、さまざまな場面で活用されています。

onblur属性の構文

onblur属性の基本的な構文は以下のとおりです。

<tagname onblur="script"></tagname>

要素がフォーカスを失ったときに、指定したスクリプト（JavaScript）が実行されます。

onblurイベント属性の使用例

ここでは、ボタンからフォーカスが外れたときにメッセージを表示するサンプルを紹介します。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #FBAB7E;
        background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
        text-align: center;
        padding: 20px;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
    .show {
        font-size: 1.2rem;
    }
</style>
</head>
<body>
<h1>HTML onblurイベント属性のデモ</h1>
<button onblur="blurFn()" class="btn" onclick='clickFn()'>クリックしてください</button>
<div class="show"></div>
<script>
    function blurFn() {
        var msg = document.querySelector('.show');
        msg.innerHTML = "";
        msg.innerHTML = "フォーカスが外れました（blur）";
    }
    function clickFn() {
        var msg = document.querySelector('.show');
        msg.innerHTML = "";
        msg.innerHTML = "ボタンがクリックされました！";
    }
</script>
</body>
</html>

実行結果

まず、「クリックしてください」ボタンをクリックすると、onclickイベントによってメッセージが表示されます。

次に、ボタン以外の場所をクリックすると、ボタンからフォーカスが外れ、onblurイベントが発火して新しいメッセージが表示されます。

このように、onblur属性を使えば「要素からフォーカスが離れた瞬間」の動きを簡単に制御できます。特にフォームの入力値検証（バリデーション）では、ユーザーが入力欄から離れたタイミングで値をチェックする処理としてよく使われるイベント属性です。

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

    HTMLのondragenterイベント属性は、ドラッグ可能な要素やテキストが、ドキュメント内の有効なドロップターゲット（ドロップ先）に入った瞬間に発生するイベントです。ドラッグ＆ドロップ操作のUIを作成する際に、ドロップ領域をハイライト表示するなど、ユーザーへの視覚的なフィードバックを提供したい場合によく活用されます。構文（Syntax）ondragenterイベント属性の基本的な書き方は以下のとおりです。<tagname ondragenter="script"></tagname>対象となるタグの属性として「ondragenter」を指定し、値

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

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