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

HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説

HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。

focus()メソッドの主な活用シーン

  • ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる
  • バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する
  • モーダルウィンドウを開いたときに、特定のボタンや入力欄へフォーカスを設定する

構文

focus()メソッドの基本構文は以下のとおりです。

HTMLElementObject.focus()

サンプルコード

それでは、focus()メソッドの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    input[type=text]:focus, p:active {
        color: blue;
        font-size:35px;
        background-color:lightpink;
        border:2px solid blue;
    }
    input[type=text]{
        color:black;
        font-size:20px;
    }
</style>
<script>
    function enableFocus() {
        document.getElementById("USR1").focus();
    }
    function disableFocus() {
        document.getElementById("USR1").blur();
    }
</script>
</head>
<body>
<h1>focus() method example</h1>
<label>USERNAME :<input id="USR1" type="text" size=5 maxlength=10></label>
<br><br>
<input type="button" onclick="enableFocus()" value="FOCUS">
<input type="button" onclick="disableFocus()" value="BLUR">
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説

FOCUSボタンをクリックした場合：

HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説

BLURボタンをクリックした場合：

HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説

コードの解説

このサンプルでは、以下のような処理を行っています。

1. テキストボックスの作成

まず、id属性に「USR1」を持つテキストボックスを作成し、sizeプロパティを5、maxlengthプロパティを10に設定しています。

<label>USERNAME :<input id="USR1" type="text" size=5 maxlength=10></label>

2. CSSスタイルの定義

次に、テキストボックスがフォーカスされた（アクティブな）状態と、そうでない状態に対して、それぞれ異なるCSSスタイルを定義しています。

input[type=text]:focus, input[type=text]:active {
    color: blue;
    font-size:35px;
    background-color:lightpink;
    border:2px solid blue;
}
input[type=text]{
    color:black;
    font-size:20px;
}

3. ボタンの配置

さらに、「FOCUS」と「BLUR」の2つのボタンを作成し、ユーザーがクリックすると、それぞれenableFocus()メソッドとdisableFocus()メソッドが実行されるようにしています。

<input type="button" onclick="enableFocus()" value="FOCUS">
<input type="button" onclick="disableFocus()" value="BLUR">

4. JavaScriptによるフォーカス制御

enableFocus()メソッドでは、getElementById()メソッドを使って対象の入力要素を取得し、focus()メソッドを呼び出してテキストボックスにフォーカスを設定します。これにより、テキストボックスに:focusスタイルが適用され、見た目が変化します。

一方、disableFocus()メソッドでは、idが「USR1」の入力要素を取得し、blur()メソッドを呼び出すことでテキストボックスからフォーカスを解除します。その結果、通常のCSSスタイル（デフォルトのスタイル）に戻ります。

function enableFocus() {
    document.getElementById("USR1").focus();
}
function disableFocus() {
    document.getElementById("USR1").blur();
}

このように、focus()メソッドとblur()メソッドを組み合わせることで、JavaScriptから柔軟にフォーカスを制御できます。フォームのユーザビリティやアクセシビリティ向上のためにも、ぜひ活用してみてください。

  1. HTML DOM getBoundingClientRect()メソッドの使い方を徹底解説

    getBoundingClientRect()メソッドとはHTML DOMのgetBoundingClientRect()メソッドは、要素のサイズや位置をビューポート（表示領域）を基準に取得するためのメソッドです。戻り値はDOMRect型のオブジェクトで、以下の8つのプロパティを持っています。lefttoprightbottomxywidthheightなお、このバウンディングボックス（外接矩形）の位置は、ページのスクロール位置が変わるとそれに応じて変化する点に注意してください。構文getBoundingClientRect()メソッドの構文は以下の通りです。element.getBoundi

  2. HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説

    HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで