blur

ブラー（イベント）

意味要素のフォーカスが外れたときのイベント。

blurとは？

フォーム要素やリンクなどのフォーカスが外れる（選択が解除される）ときに発火するイベント。

blurの具体的な使い方

blurイベントで入力値を検証する例

<input type="email" id="email" placeholder="メールアドレスを入力">
<p id="validation"></p>

<script>
const validateEmail = (email) => {
  const re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
  return re.test(String(email).toLowerCase());
};

const emailInput = document.getElementById('email');
const validationMessage = document.getElementById('validation');

emailInput.addEventListener('blur', function() {
  if (this.value === '') {
    validationMessage.textContent = 'メールアドレスを入力してください。';
  } else if (!validateEmail(this.value)) {
    validationMessage.textContent = '正しいメールアドレスの形式ではありません。';
  } else {
    validationMessage.textContent = '有効なメールアドレスです。';
  }
});
</script>

メールアドレス入力フィールドからフォーカスが外れたときに、入力値が正しいメールアドレスの形式かどうかを検証します。blurイベントを使用することで、ユーザーが入力を完了したタイミングでバリデーションを行うことができます。

blurに関するよくある質問

Q. blurイベントはいつ発生する？

A. 要素がフォーカスを失ったとき（他の要素がフォーカスを得たとき、またはウィンドウがフォーカスを失ったとき）に発生します。

Q. blurとfocusoutの違いは？

A. blurは親要素に伝播しませんが、focusoutは親要素に伝播します。単一の要素のみを扱う場合はblurを、親子関係のある要素群を扱う場合はfocusoutを使用することが一般的です。

blurが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのblurやresize、offline、dispatchEvent()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。