HTML DOM blur()メソッドとは？フォーカス制御の使い方をサンプルコードで解説
HTML DOMのblur()メソッドは、特定の要素からキーボードフォーカスを解除するために使用されるメソッドです。blur()を活用することで、任意のHTML要素に対してフォーカスを与えたり、逆にフォーカスを外したりすることができます。ユーザーの操作に応じて特定の要素へフォーカスを柔軟に制御できるため、Webページ内のナビゲーションやアクセシビリティの向上にも役立ちます。
構文（シンタックス）
blur()メソッドの基本的な構文は以下の通りです。
Object.blur()
対象となる要素オブジェクトに対してblur()を呼び出すだけで、その要素が持つフォーカスを解除できます。引数は不要で、非常にシンプルなメソッドです。
サンプルコード
ここで、blur()メソッドの具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
a{
text-decoration:none;
font-size:20px;
}
a:focus, a:active {
color: red;
text-decoration:underline;
font-size:40px;
}
</style>
</head>
<body>
<a id="Anchor" href="https://example.com">example.com</a>
<p>Give focus or remove focus…</p>
<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">
<script>
function getfocus() {
document.getElementById("Anchor").focus();
}
function losefocus() {
document.getElementById("Anchor").blur();
}
</script>
</body>
</html>
出力結果
このコードを実行すると、以下のような画面が表示されます。
「Get focus」ボタンをクリックした場合：
「Lose focus」ボタンをクリックした場合：リンクは元のスタイルに戻ります。
コードの解説
上記のサンプルコードでは、以下のような処理を行っています。
1. アンカー要素の作成
まず、id「Anchor」とhref属性を持つアンカー（<a>）タグを作成しています。
<a id="Anchor" href="https://example.com">example.com</a>
2. フォーカス状態を区別するCSSスタイルの定義
次に、リンクがフォーカスされている・アクティブな状態と、そうでない状態を視覚的に区別できるよう、2種類のスタイルを定義しています。
a{
text-decoration:none;
font-size:20px;
}
a:focus, a:active {
color: red;
text-decoration:underline;
font-size:40px;
}
通常時は文字サイズ20pxの下線なしスタイルですが、フォーカス中・アクティブ中は文字色が赤になり、下線が表示され、文字サイズも40pxに拡大されます。
3. ボタンの配置
続いて、「Get focus」と「Lose focus」の2つのボタンを作成し、それぞれgetfocus()関数とlosefocus()関数を実行するように設定しています。
<input type="button" onclick="getfocus()" value="Get focus"> <input type="button" onclick="losefocus()" value="Lose focus">
4. getfocus()関数の動作
getfocus()関数は、id「Anchor」が付与された要素（この例では<a>要素）を取得し、そのfocus()メソッドを実行します。これによりリンクにはa:focusおよびa:activeのスタイルが適用され、文字色が赤になり、下線が表示されて文字サイズが40pxに拡大します。
function getfocus() {
document.getElementById("Anchor").focus();
}
5. losefocus()関数の動作
一方、losefocus()関数は同じくid「Anchor」の要素を取得し、blur()メソッドを実行してリンクからフォーカスを解除します。その結果、リンクのスタイルは<a>要素の元のスタイルに戻ります。
function losefocus() {
document.getElementById("Anchor").blur();
}
まとめ
blur()メソッドは、focus()メソッドと対になる存在であり、両者を組み合わせることで要素のフォーカス状態を自由に制御できます。フォーム入力後のフォーカス移動や、キーボード操作のユーザー体験（UX）改善など、実務でも幅広く活用できる便利なメソッドです。
-
HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説
HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで
-
HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説
HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや