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

JavaScriptのfocus()メソッドとは？基本的な使い方とサンプルコードをわかりやすく解説

focus()メソッドとは

JavaScriptのfocus()メソッドは、HTMLフォーム要素などにフォーカス（入力の焦点）を当てるためのメソッドです。このメソッドを呼び出すと、対象の要素が現在のドキュメントにおける「アクティブな要素」として設定されます。

フォーカスは同時に1つの要素にしか適用できない点に注意してください。新しい要素へフォーカスを移すと、それまでフォーカスされていた要素からは自動的に解除されます。focus()はテキストボックスやボタン、リンクなど、ユーザーが操作できるさまざまな要素に対して使用でき、フォームの初期入力位置の指定や、バリデーションエラー発生時に入力欄へ自動的に移動させる処理などでよく活用されます。

構文

element.focus(options);

引数のoptionsにはオプションオブジェクトを指定できます。例えば「{ preventScroll: true }」を渡すと、フォーカス移動時にページが自動スクロールしなくなります。

サンプルコード

次の例では、最初にid属性「focus」を持つアンカータグ（aタグ）の中に「Tutorialspoint」というテキストを配置しています。その後、関数を定義し、その中でDOMメソッドを使って該当のidを取得したうえでfocus()メソッドを適用することで、「Tutorialspoint」の文字色を赤色に変更します。ここではクリックイベントのトリガーとしてボタンを使用しています。

<html>
<head>
<style>
    a:focus, a:active {
        color: red;
    }
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com/" id="focus">Tutorialspoint</a>
<input type="button" value="getfocus" onclick="getfo()">
<script>
    function getfo() {
        document.getElementById("focus").focus();
    }
</script>
</body>
</html>

CSS側では「a:focus, a:active」というセレクタを使い、フォーカス中またはアクティブな状態のリンクの文字色を赤に設定しています。JavaScriptのfocus()によってリンクがアクティブ化されると、このスタイルが自動的に適用される仕組みです。

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


JavaScriptのfocus()メソッドとは？基本的な使い方とサンプルコードをわかりやすく解説


続いて「getfocus」ボタンをクリックすると、リンクにフォーカスが当たり、次のような結果が得られます。

実行結果

JavaScriptのfocus()メソッドとは？基本的な使い方とサンプルコードをわかりやすく解説


  1. JavaScriptのgetElementByIdメソッドの仕組みと使い方を徹底解説

    getElementByIdとはgetElementById()は、指定した値と一致するID属性を持つ要素を取得して返すDOMメソッドです。HTML DOMにおける最も基本かつ頻繁に使われるメソッドのひとつであり、ページ上の要素を操作したいほぼすべての場面で活用されます。このメソッドの主な特徴は以下の通りです。指定したIDを持つ要素が存在しない場合、nullを返します。IDは1つのページ内で一意（ユニーク）である必要があります。同じIDを持つ要素が複数存在した場合は、ドキュメント内で最初に見つかった要素が返されます。要素の内部テキストやHTMLにアクセスするには、.innerHTMLプロパティ

  2. JavaScriptのコンストラクターにプロパティやメソッドを追加する方法

    JavaScriptでは、コンストラクター関数に対してprototype（プロトタイプ）を利用することで、後からプロパティやメソッドを追加することができます。この方法で追加したプロパティやメソッドは、そのコンストラクターから生成されたすべてのインスタンスで共有されるため、メモリの面でも効率的です。 サンプルコード 以下は、JavaScriptのコンストラクターにプロパティとメソッドを追加するコード例です。 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta n