HTMLElement.focus()

HTMLElement.focus() メソッドは、指定された要素にフォーカスを設定できる場合、フォーカスを設定します。 フォーカスされた要素は、デフォルトでキーボードや同様のイベントを受け取る要素です。

構文

element.focus(options); // Object parameter

パラメーター

options Optional
フォーカスプロセスの側面を制御するオプションを提供するオプションのオブジェクト。 このオブジェクトには、次のプロパティが含まれる場合があります。
preventScroll Optional
ブラウザーがドキュメントをスクロールして、新しくフォーカスされた要素を表示するかどうかを示す Boolean の値。 preventScroll の値が false(デフォルト)の場合、ブラウザーは要素をフォーカスした後、その要素をスクロールして表示します。 preventScrolltrue に設定されている場合、スクロールしません。

テキストフィールドにフォーカスする

JavaScript

focusMethod = function getFocus() {           
  document.getElementById("myTextField").focus();
}

HTML

<input type="text" id="myTextField" value="テキストフィールド">
<p></p>
<button type="button" onclick="focusMethod()">クリックしてテキストフィールドにフォーカスしてください!</button>

結果

ボタンにフォーカスする

JavaScript

focusMethod = function getFocus() {          
  document.getElementById("myButton").focus();
}

HTML

<button type="button" id="myButton">クリックしてください!</button>
<p></p>
<button type="button" onclick="focusMethod()">クリックしてボタンにフォーカスしてください!</button>

結果

focusOption でフォーカスする

JavaScript

focusScrollMethod = function getFocus() {          
  document.getElementById("myButton").focus({preventScroll:false});
}
focusNoScrollMethod = function getFocusWithoutScrolling() {          
  document.getElementById("myButton").focus({preventScroll:true});
}

HTML

<button type="button" onclick="focusScrollMethod()">クリックしてボタンにフォーカスしてください!</button>
<button type="button" onclick="focusNoScrollMethod()">クリックしてスクロールせずにボタンにフォーカスしてください!</button>

<div id="container" style="height: 1000px; width: 1000px;"> 
<button type="button" id="myButton" style="margin-top: 500px;">クリックしてください!</button>
</div>

結果

仕様

仕様 状態 コメント
HTML Living Standard
focus の定義
現行の標準
HTML 5.1
focus の定義
勧告
HTML5
focus の定義
勧告
Document Object Model (DOM) Level 2 HTML Specification
focus の定義
廃止された
Document Object Model (DOM) Level 1 Specification
focus の定義
廃止された

ノート

mousedown イベントハンドラから HTMLElement.focus() を呼び出す場合は、event.preventDefault() を呼び出して、フォーカスがその HTMLElement から離れないようにする必要があります。

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
focusChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 5IE 完全対応 9Opera 完全対応 32Safari 完全対応 10WebView Android 完全対応 4.4Chrome Android 完全対応 18Firefox Android 完全対応 5Opera Android 完全対応 32Safari iOS 完全対応 ありSamsung Internet Android ?
preventScroll Boolean optionChrome 完全対応 64Edge ? Firefox 完全対応 68IE ? Opera 完全対応 51Safari ? WebView Android 完全対応 64Chrome Android 完全対応 64Firefox Android 完全対応 68Opera Android 完全対応 47Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報