HTMLElement.focus() - フォーカスする

2017/10/03

focus()は、HTMLElementのメソッドです。要素に対するフォーカスを発生させます。

概要

名前

focus

所属

IDL

void focus();

仕様書

https://html.spec.whatwg.org/multipage/interaction.html#dom-focus

説明

このメソッドに引数はありません。返り値もありません。

チュートリアル

フォーカスを発生させる例です。

<input id="hoge">

// 要素を取得する
var element = document.getElementById( "hoge" ) ;

// 要素にフォーカスする
element.focus() ;

デモ

HTMLElement.focus()のデモです。「フォーカス」のボタンをクリックすると、focus()を実行して入力フォームにフォーカスします。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#result {
	white-space: pre-wrap ;
}

input {
	width: 50% ;
	font-size: 16px ;
}
</style>
</head>
<body>
	<p>
		<button id="hoge">フォーカス</button>
		<input id="fuga">
	</p>
<script>
/** try it! **/
var element1 = document.getElementById( "hoge" ) ;
var element2 = document.getElementById( "fuga" ) ;

element1.addEventListener( "click", function ( event ) {
	element2.focus() ;
} ) ;
/** try it! **/
</script>
</body>
</html>