HTMLElement.blur() - フォーカスを外す

2017/10/03

blur()は、HTMLElementのメソッドです。要素に対するフォーカスを外します。

概要

名前

blur

所属

IDL

void blur();

仕様書

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

説明

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

チュートリアル

フォーカスを外す例です。

<input id="hoge">

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

// 要素のフォーカスを外す
element.blur() ;

デモ

HTMLElement.blur()のデモです。入力フォームにフォーカスして、そのまま待って下さい。3秒後にblur()を実行してフォーカスを外します。

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

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

input {
	width: 50% ;
	font-size: 16px ;
}
</style>
</head>
<body>
	<p><input id="hoge"></p>
<script>
/** try it! **/
var element = document.getElementById( "hoge" ) ;

element.addEventListener( "focus", function ( event ) {
	setTimeout( function () {
		element.blur() ;
	}, 3000 ) ;
} ) ;
/** try it! **/
</script>
</body>
</html>