勉強したことのメモ

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

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

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

2024/11/01 jQuery JavaScript

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

目次

1 対応方法
- 1.1 ソースコード
2 リファレンス
- 2.1 HTMLElement: focus() メソッド
- 2.2 .focus()

対応方法

ソースコード

<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

関連記事

: 国土地理院のAPIを使用して無料でジオコーディング(住所→経度緯度)を行う方法

GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...

: DateTimePickerで特定日にClassを付与&選択不可にする方法

jQueryプラグインのDateTimePikerで特定の日にClassを付与し ...

: tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)

テーブルタグ内で縦にスクロールした際にテーブルヘッダー部分は表示させたままテーブ ...

: FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード

FlashとjQueryを組み合わせたプラグインを用いてWebカメラで撮影した画 ...

: ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法

formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...