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

【JavaScript】idではなくクラス（class）を指定して特定の要素にフォーカスを当てる方法

JavaScriptでは、focus()メソッドを使うことで任意の要素にフォーカスを設定できます。通常は getElementById() でidを指定するのが一般的ですが、querySelectorAll() を組み合わせれば、id宣言ではなくクラス（class）名を指定して特定の要素にフォーカスを当てることも可能です。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<span class="TEXT_FOCUS" tabindex="-1"><center>FOCUS用テキストボックス</center></span><br>
<button id="focusButton">クリックしてフォーカスを取得する</button>
<script>
    document.getElementById('focusButton').addEventListener('click', function() {
        document.querySelectorAll('.TEXT_FOCUS')[0].focus();
    });
</script>
</body>
</html>

コードのポイント解説

  • tabindex="-1"： span 要素はデフォルトではフォーカスを受け取れません。この属性を指定することで、タブ移動には含まれないものの、プログラムからフォーカスを設定できるようになります。
  • querySelectorAll('.TEXT_FOCUS')[0]： クラス名「TEXT_FOCUS」を持つ要素をすべて取得し、そのうち最初の要素（インデックス0）を取り出しています。idではなくクラスで対象を特定したい場合に有効な書き方です。
  • focus()： 取得した要素に対してフォーカスを設定するメソッドです。
  • addEventListener('click', ...)： ボタンがクリックされたタイミングでフォーカス処理を実行しています。

実行方法

上記のプログラムを実行するには、ファイル名を anyName.html（index.html） として保存し、VS Codeエディター上でそのファイルを右クリックして「Open with Live Server」を選択してください。ブラウザが起動し、ページが表示されます。

出力結果

【JavaScript】idではなくクラス（class）を指定して特定の要素にフォーカスを当てる方法

ボタンをクリックすると、クラス名で指定した要素にフォーカスが移動します。実際の表示は以下のスナップショットのようになります。

【JavaScript】idではなくクラス（class）を指定して特定の要素にフォーカスを当てる方法

  1. JavaScriptでIDを指定して要素を削除する方法

    JavaScriptでIDを指定して要素を削除するIDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。コード例以下は実際のサンプルコードです。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8>    <meta name=viewport content=width=device-width, in

  2. JavaScriptでHTMLテーブルの全要素にIF条件を適用する方法

    HTMLテーブル内のすべての要素にIF条件（条件分岐）を適用したい場合は、document.querySelectorAll()とforEach()を組み合わせることで簡単に実現できます。querySelectorAll()で対象の要素をまとめて取得し、forEach()で1つずつループ処理を行いながら、各要素に対して条件判定を実行します。サンプルコード以下がそのコード例です。<!DOCTYPE html> <html lang="ja"> <head>    <meta charset="UTF-8&