Comment: A simple HTML function now allows us to automatically locate the input focus to the required elements after the page is loaded. It is completed through an attribute called autofocus. Interested friends can learn about it.
Original text: HTML5 autofocus Attribut
Original release date: August 27, 2012
Translation time: August 6, 2013
HTML5 has launched a lot of great things for us.
In the past, tasks we wanted to complete with JavaScript and Flash, such as form verification, input box blank prompts (INPUT placeholders), client file upload and download (client side file naming), and audio/video playback, can now be completed with basic HTML. Another simple HTML feature is that it now allows us to automatically locate the input focus to the required element after the page is loaded, and complete it through a property called autofocus.
The code is as simple as the following:
<!-- These all work! -->
<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>
After the autofocus property is set, the input, textarea, and button elements will be automatically selected after the page is loaded (that is, gaining focus). I tried other elements (such as h1 tag), tabIndex=0, but the autofocus property has no effect on these elements at all.
This attribute is useful in the main purpose of obtaining pages whose main purpose is collecting information, such as Google homepage (99% of cases are used for search) or online installation wizards (such as WordPress's installer). And the most important thing is that JavaScript does not require participation.
The complete page code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 autofocus attribute testing</title>
<meta content="EditPlus">
<meta content="[email protected]">
<meta content="original=http://davidwalsh.name/autofocus">
</head>
<body>
<!-- In principle, only one of the following three elements can be set. If multiple elements are set, the last element should obtain the focus-->
<!--
-->
<div>
<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>
</div>
</body>
</html>