勉強したことのメモ

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

  関連記事

videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法

Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...

jQueryでiframe内の要素を呼び出し

jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...

jQueryで画像(タグ内)のsrc情報を取得する場合

すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...

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

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

javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...