JavaScriptでフォーカスを制御！10の方法とサンプルコード

はじめに
●JavaScriptとフォーカス操作の基本
- ○フォーカス操作の意義
●JavaScriptでフォーカスを操作する10の方法
●注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptでフォーカス操作を行うことができるようになります。

フォーカス操作はウェブアプリケーションのユーザビリティを向上させるために重要な技術です。

この記事では、JavaScriptでフォーカス操作を行う10の方法を初心者向けに徹底解説します。

サンプルコード付きで使い方や注意点、カスタマイズ方法も学べるので、ぜひ参考にしてみてください。

●JavaScriptとフォーカス操作の基本

フォーカス操作とは、ウェブページ上の要素にキーボードやマウスでアクセスできる領域を制御することを指します。

これにより、ユーザーが入力や操作を行いやすくなり、アクセシビリティやユーザビリティが向上します。

○フォーカス操作の意義

フォーカス操作は、キーボード操作によるアクセシビリティを向上させるために重要です。

特に、視覚障害者やマウス操作が難しいユーザーにとって、フォーカス操作が適切に設定されていることで、ウェブページをより容易に利用することができます。

●JavaScriptでフォーカスを操作する10の方法

ここでは、JavaScriptでフォーカス操作を行う10の方法をサンプルコード付きで解説します。

○サンプルコード1：フォーカスを設定する

フォーカスを設定するには、要素の focus() メソッドを使用します。

// idが"input1"の要素にフォーカスを設定
document.getElementById("input1").focus();

このサンプルコードでは、idが “input1” の要素にフォーカスを設定しています。

○サンプルコード2：フォーカスを外す

フォーカスを外すには、要素の blur() メソッドを使用します。

// idが"input1"の要素からフォーカスを外す
document.getElementById("input1").blur();

このサンプルコードでは、idが “input1” の要素からフォーカスを外しています。

○サンプルコード3：フォーカスイベントの検出

フォーカスイベントを検出するには、要素にイベントリスナーを追加します。

// idが"input1"の要素にフォーカスイベントリスナーを追加
document.getElementById("input1").addEventListener("focus", function() {
  console.log("フォーカスされました。");
});

このサンプルコードでは、idが “input1” の要素にフォーカスイベントリスナーを追加し、フォーカスされたときにコンソールにメッセージが表示されるようになっています。

○サンプルコード4：フォーカス移動の制御

フォーカス移動を制御するには、keydown イベントを利用します。

// idが"input1"の要素にkeydownイベントリスナーを追加
document.getElementById("input1").addEventListener("keydown", function(event) {
  // Tabキーが押された場合のみ、フォーカス移動を制御
  if (event.key === "Tab") {
    event.preventDefault(); // デフォルトのフォーカス移動をキャンセル
    document.getElementById("input2").focus(); // idが"input2"の要素にフォーカスを移動
  }
});

このサンプルコードでは、idが “input1” の要素にkeydownイベントリスナーを追加し、Tabキーが押された場合に、idが “input2” の要素にフォーカスが移動するように制御しています。

○サンプルコード5：フォーカス範囲の制限

特定の要素内でのみフォーカスを移動させる場合、フォーカス範囲を制限できます。

const container = document.getElementById("container");

container.addEventListener("keydown", function(event) {
  if (event.key === "Tab") {
    event.preventDefault();
    const focusableElements = container.querySelectorAll("input, button");
    let index = Array.from(focusableElements).indexOf(document.activeElement);
    index = event.shiftKey ? index - 1 : index + 1;
    index = (index + focusableElements.length) % focusableElements.length;
    focusableElements[index].focus();
  }
});

このサンプルコードでは、idが “container” の要素内でTabキーを押すと、その要素内のみでフォーカスが移動するように制限しています。

○サンプルコード6：フォーカスの視覚的強調フォーカスされた要素を視覚的に強調するには、CSSを利用します。

:focus {
  outline: 2px solid #FF9900;
}

このCSSコードでは、フォーカスされた要素にオレンジ色のアウトラインが表示されるようになります。

○サンプルコード7：フォーカス時のアニメーション

フォーカス時にアニメーションを追加するには、CSSの transition を利用します。

input {
  transition: all 0.3s;
}

input:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(255, 153, 0, 0.5);
}

このCSSコードでは、フォーカスされた要素にオレンジ色のシャドウがアニメーションとして表示されるようになります。

○サンプルコード8：フォーカス順序のカスタマイズ

フォーカス順序をカスタマイズするには、HTML要素に tabindex 属性を追加します。

<input type="text" tabindex="1">
<input type="text" tabindex="3">
<input type="text" tabindex="2">

このサンプルコードでは、tabindex 属性の値が小さい順にフォーカスが移動します。

1 から 3 までのフォーカス順序が設定されています。

○サンプルコード9：フォーカス検索

フォーカス可能な要素を検索するには、JavaScriptを使用します。

function getFocusableElements() {
  return Array.from(document.querySelectorAll("a, button, input, textarea, select, details, [tabindex]:not([tabindex='-1'])"));
}

const focusableElements = getFocusableElements();
console.log(focusableElements);

このサンプルコードでは、フォーカス可能な要素を検索し、そのリストをコンソールに表示します。

○サンプルコード10：フォーカスの自動移動

特定の条件を満たした場合に、フォーカスを自動的に移動させるには、JavaScriptを使用します。

document.getElementById("input1").addEventListener("input", function(event) {
  if (event.target.value.length >= 3) {
    document.getElementById("input2").focus();
  }
});

このサンプルコードでは、idが “input1” の要素で入力された文字数が3文字以上になった場合に、idが “input2” の要素にフォーカスが自動的に移動します。

●注意点と対処法

フォーカス操作に関する注意点として、次のことに留意してください。

アクセシビリティ

フォーカス操作をカスタマイズすることで、一部のユーザーがアクセスしにくいページになる可能性があります。
アクセシビリティを考慮し、適切なフォーカス制御を実装してください。
tabindex の使用

tabindex の値が大きくなると、フォーカス順序が複雑になることがあります。
適切な値を使用し、簡潔なフォーカス順序を維持してください。