勉強したことのメモ

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で後から追加した要素にhasClass / addClass / removeClassを使用した際の挙動

jQueryで後から追加した要素にhasClass / addClass / r ...

jQueryで特定のdata属性をセレクタとして指定する方法

jQueryで特定のdata属性をクリックした際に何らかのイベントを実行したかっ ...

SortableJSを使ってデータの並べ替え&保存

あるシステムを拝見した際にtableタグ内に並んでいる項目をドラッグ&ド ...

JavaScriptのbeforeunloadイベントでページの離脱防止

何らかのformがあるページで各種内容を入力後に何らかのリンクをクリックする等、 ...

PHPとajaxでチャットの作成

■ソース ・index.php <? error_reporting(E_ ...