HTMLElement: focus() メソッド
=========================

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

 既定では、ブラウザーは要素をフォーカスした後、スクロールして表示します。また、フォーカスした要素を可視的に示すこともあります（通常は、要素の周りに「フォーカスリング」を表示します）。
 既定では、スクロールを無効化し、要素に可視的な表示を強制するための引数オプションが提供されています。

構文
--


```js
focus()
focus(options)
```

### 引数

`options` 省略可

 フォーカス処理の制御の側面のためのオプションのオブジェクト。
 このオブジェクトには、次のプロパティが含まれる場合があります。


`preventScroll` 省略可

論理値で、ブラウザーが文書をスクロールして、新しくフォーカスされた要素を表示するかどうかを示します。`preventScroll` の値が `false`（既定値）の場合、ブラウザーは要素をフォーカスした後、その要素をスクロールして表示します。`preventScroll` が `true` に設定されている場合、スクロールしません。

`focusVisible` 省略可 
Experimental

 論理値です。`true` に設定すると、要素にフォーカスが当たっていることを強制的に可視的に示すことができます。
 既定では、あるいはプロパティが `true` でない場合でも、ブラウザーがユーザーにとってのアクセシビリティを向上させると判断した場合は、可視表示を提供することがあります。



### 返値

なし (`undefined`)。

例
-

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

この例は、ボタンを使用してテキストフィールドにフォーカスを設定します。

#### HTML


```html
<input id="myTextField" value="テキストフィールド" />
<button id="focusButton">クリックでテキストフィールドにフォーカスを設定</button>
```


#### JavaScript

 次のコードは、ボタンが押されたときにテキストフィールドにフォーカスを設定するイベントハンドラーを追加しています。
 ほとんどのブラウザーは、フォーカスされたテキストフィールドに自動的に可視表示（「フォーカスリング」）を追加するので、このコードでは `focusVisible` を `true` に設定していないことに注意してください。


```js
document.getElementById("focusButton").addEventListener("click", () => {
  document.getElementById("myTextField").focus();
});
```


#### 結果

ボタンを選択すると、テキストフィールドにフォーカスを設定します。

### ボタンにフォーカス

#### HTML

 まず、3 つのボタンを定義します。
 中と右のボタンは、どちらも一番左のボタンにフォーカスを設定します。
 一番右のボタンは `focusVisible` を指定します。


```html
<button id="myButton">クリックしてください</button>
<button id="focusButton">クリックで 「ボタン」にフォーカスを設定</button>
<button id="focusButtonVisibleIndication">
  クリックで「Button」にフォーカスと focusVisible を設定
</button>
```


#### JavaScript

下記コードでは、中ボタンと右ボタンのクリックイベントのハンドラーを設定しています。


```js
document.getElementById("focusButton").addEventListener("click", () => {
  document.getElementById("myButton").focus();
});

document
  .getElementById("focusButtonVisibleIndication")
  .addEventListener("click", () => {
    document.getElementById("myButton").focus({ focusVisible: true });
  });
```


#### 結果

一番左のボタンにフォーカスを設定するには、中央のボタンか一番右のボタンのいずれかを選択します。

 ブラウザーは通常、プログラムでフォーカスを設定する際にボタン要素に目に見えるフォーカスの表示をしないので、真ん中のボタンを選択した場合の効果は明らかではないかもしれません。
 しかし、`focusVisible` オプションがブラウザーで対応していれば、正しいボタンが選択されたときに、左端のボタンにフォーカスが変わるのが見えるはずです。

### スクロールありとなしのフォーカス

この例では、オプション `preventScroll` に `true` と `false`（既定値）を設定してフォーカスを設定した場合の効果を示しています。

#### HTML

HTML は、画面外にある 3 つ目のボタンのフォーカスを設定するために使用する、2 つのボタンを定義しています。


```html
<button id="focus\_scroll">クリックでボタンにフォーカス</button>
<button id="focus\_no\_scroll">
  クリックでスクロールせずにボタンにフォーカス
</button>

<div id="container">
  <button id="myButton" style="margin-top: 500px;">ボタン</button>
</div>
```


#### JavaScript

 このコードでは、最初のボタンと 2 つ目のボタンにクリックイベントハンドラーを設定し、最後のボタンにフォーカスを設定しています。
 最初のハンドラーでは `preventScroll` オプションを指定していないので、フォーカスされた要素へのスクロールが有効になることに注意してください。


```js
document.getElementById("focus\_scroll").addEventListener("click", () => {
  document.getElementById("myButton").focus(); // default: {preventScroll:false}
});

document.getElementById("focus\_no\_scroll").addEventListener("click", () => {
  document.getElementById("myButton").focus({ preventScroll: true });
});
```


#### 結果

 最初のボタンを選択すると、フォーカスが設定され、画面の内側のボタンまでスクロールします。
 2 つ目のボタンを選択すると、フォーカスは設定されますが、スクロールは無効です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-focus-dev |

メモ
--

* `HTMLElement.focus()` をmousedown イベントハンドラーから呼び出した場合、 `HTMLElement` からフォーカスが外れないように `event.preventDefault()` を呼び出す必要があります。
* `tabindex` やシャドウ DOM など、これまで仕様が定まらないままだった様々な HTML 機能に関するフォーカスの挙動が、最近（2019 年 10 月に）更新されました。
 詳しくは WHATWG blog をチェックしてみてください。
ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `HTMLElement.blur` で要素からフォーカスを取り除きます。
* `document.activeElement` で現在フォーカスされている要素を知ることができます。