【JavaScript】フォーカスイベントの使い方｜focus・blur・focusin・focusout・フォームバリデーション・アクセシビリティまで解説

const input = document.getElementById("email");

// フォーカスを受けたとき
input.addEventListener("focus", () => {
  console.log("フォーカスされました");
});

// フォーカスが外れたとき
input.addEventListener("blur", () => {
  console.log("フォーカスが外れました");
});

const form = document.getElementById("myForm");

// NG: focus はバブリングしないので親では発火しない
form.addEventListener("focus", () => {
  console.log("子要素にフォーカス"); // 発火しない
});

const form = document.getElementById("myForm");

// OK: focusin はバブリングするので親で検知できる
form.addEventListener("focusin", (e) => {
  console.log("フォーカスされた要素:", e.target.name);
});

form.addEventListener("focusout", (e) => {
  console.log("フォーカスが外れた要素:", e.target.name);
});

const input = document.getElementById("username");

// フォーカスを移動
input.focus();

// スクロールを防止してフォーカス
input.focus({ preventScroll: true });

// フォーカスを外す
input.blur();

// DOMContentLoaded 後にフォーカス
document.addEventListener("DOMContentLoaded", () => {
  document.getElementById("searchInput").focus();
});

// HTML の autofocus 属性でも可能
// <input id="searchInput" autofocus>

.form-group {
  border: 2px solid #ccc;
  transition: border-color 0.2s ease;
}

/* 子要素にフォーカスがあるとき親のスタイルを変更 */
.form-group:focus-within {
  border-color: #0284c7;
}

<!-- Tab キーでフォーカス可能 -->
<div tabindex="0" class="card">カード1</div>

<!-- JS の focus() でのみフォーカス可能 -->
<div tabindex="-1" id="errorMessage">エラー: 入力が不正です</div>

const input = document.getElementById("email");

input.addEventListener("focus", (e) => {
  console.log("フォーカス移動元:", e.relatedTarget); // 前にフォーカスされていた要素
});

input.addEventListener("blur", (e) => {
  console.log("フォーカス移動先:", e.relatedTarget); // 次にフォーカスされる要素
});

const emailInput = document.getElementById("email");
const errorMsg = document.getElementById("emailError");

emailInput.addEventListener("blur", () => {
  const value = emailInput.value.trim();

  if (value && !value.includes("@")) {
    errorMsg.textContent = "有効なメールアドレスを入力してください";
    emailInput.classList.add("is-invalid");
  } else {
    errorMsg.textContent = "";
    emailInput.classList.remove("is-invalid");
  }
});

.form-field {
  position: relative;
}
.form-field label {
  position: absolute;
  top: 12px;
  left: 12px;
  color: #999;
  transition: all 0.2s ease;
  pointer-events: none;
}
/* フォーカス時 or 入力済みのとき: ラベルを上に移動 */
.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label {
  top: -8px;
  font-size: 12px;
  color: #0284c7;
}

function validateForm(form) {
  const errors = [];

  form.querySelectorAll("[required]").forEach(field => {
    if (!field.value.trim()) {
      field.classList.add("is-invalid");
      errors.push(field);
    } else {
      field.classList.remove("is-invalid");
    }
  });

  // 最初のエラー要素にフォーカス
  if (errors.length > 0) {
    errors[0].focus();
    return false;
  }
  return true;
}

function trapFocus(container) {
  const focusable = container.querySelectorAll(
    'a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])'
  );
  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  container.addEventListener("keydown", (e) => {
    if (e.key !== "Tab") return;

    if (e.shiftKey && document.activeElement === first) {
      e.preventDefault();
      last.focus();
    } else if (!e.shiftKey && document.activeElement === last) {
      e.preventDefault();
      first.focus();
    }
  });

  first.focus();
}