勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScript / jQueryにてページ表示時に指定したテキストボックスにフォーカスさせる方法

  jQuery JavaScript

ページを開いた際に指定したテキストボックス(input type="text")にフォーカスさせてほしいという要望を受けた。JavaScript及びjQueryでの対応方法をメモ。

 

対応方法

ソースコード

<input type="text" id="test">

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
//JavaScriptの場合
document.querySelector(`#test`).focus();

$(function(){
    //jQueryの場合
    $(`#test`).focus();
});
</script>

 

リファレンス

HTMLElement: focus() メソッド

https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/focus

.focus()

https://api.jquery.com/focus-shorthand/

 - jQuery JavaScript

  関連記事

jQuery UIを使って簡単にダイアログを表示させる方法

ブラウザ上でユーザーに対してちょっとした確認を行いたい場合はJavaScript ...

NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え

チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...

日付の範囲指定用プラグイン「DateRangePicker」の利用方法

日付型のデータを検索する際に開始・終了日のテキストボックスを用意し、それぞれにタ ...

jQselectableでセレクトボックスをリッチにする

入力フォームみたいなもので元々はテキストボックス内に 都道府県を入れてもらうとい ...

jQueryで指定の行動をとった際に、クリックイベントを発火させる方法

あるシステムでAという要素をクリックした際に何らかの処理を行うという部分があり、 ...