Written by Kasumi

JavaScriptで任意の入力フィールドにfocusを合わせる方法

JavaScriptで任意の入力フィールドにfocusを合わせたい。

本記事ではこのような悩みを解決。

実装方法について解説します。

実装サンプル

See the Pen
JavaScriptでfocusを移動させる
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

ボタンをクリックすると、入力フィールドにカーソルがfocusされる事がわかります。

実装方法は以下の通りです。

JavaScriptでfocusを合わせる

const btn = document.querySelector('button');
const input = document.querySelector('input');

//ボタンをクリックしたら
btn.addEventListener('click', e => {
  //inputの入力フィールドにフォーカスを合わせる
  input.focus();
});

JavaScriptでfocusを合わせるコード例です。

focusメソッドを使います。

focusメソッドは指定した要素に対してfocusをあてるメソッドです。

動的要因を定義して、処理内容にinput要素にフォーカスを合わせる処理をfocusメソッドを使って実装してます。

以上で実装完了です。

まとめ

JavaScriptで任意の入力フィールドにfocusを合わせる方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

【JavaScript】変数や関数をファイル分割。必要な時に読み込みする方法【モジュール化しよう】

2023.01.06
2563
JavaScript

swiperスライダーでマウスホバーにより自動再生が止まる原因。解決方法

2023.08.24
1448
JavaScript

JavaScriptで右クリックを無効・禁止にする方法

2022.12.07
1468
JavaScript

JavaScriptを使い、目次をプラグイン無しで自動生成する方法

2022.10.31
1481