HTML5 practice and analysis form - automatically obtain the focus attribute (autofocus attribute)-H5 Tutorial-php.cn

HTML5 practice and analysis form - automatically obtain the focus attribute (autofocus attribute)

黄舟

Release： 2017-02-11 11:29:40

Original

3000 people have browsed it

HTML5 has added many new functions to the form. Menglong Station will slowly introduce them to you. Today, I will introduce to you the newly added attributes related to focus in the HTML5 form.

HTML5 adds the autofocus attribute. In browsers that support it, as long as this attribute is set, the focus can be automatically moved to the corresponding field without using JavaScript to dynamically obtain focus. A small example is as follows:

　HTML code

<input type="text" value="梦龙小站" autofocus />

Copy after login

　Preview effect

HTML5 practice and analysis form - automatically obtain the focus attribute (autofocus attribute)

In order to ensure that the above code runs normally in the browser where autofocus is set, we Whether this property is set must be detected in JavaScript. If set, there is no need to call the focus() method.

　JavaScript code

function load(){
	var oInp = document.getElementById("inp");
	if(oInp.autofocus != true){
		oInp.focus();
	}
}
window.addEventListener(&#39;load&#39;,load, false);

Copy after login

　HTML code

<input type="text" value="梦龙小站" autofocus />

Copy after login

　Preview effect

HTML5 practice and analysis form - automatically obtain the focus attribute (autofocus attribute)

## Due to autofocus Is a Boolean attribute, so in supported browsers its value is "true", in unsupported browsers its value is the empty string. The above code will only call the focus() method if autofocus is not equal to true, thus ensuring forward compatibility. Browsers that support the autofocus attribute include Firefox 4+, Safari 5+, Chrome and Opera 9.6.

By default, only the form can get focus. For other tag elements, if you first set their tabIndex attribute to -1 and then call the focus() method, these elements can also be focused, but only Opera does not support this technology.

HTML5 really makes everyone’s coding life very simple. A small attribute saves one or even several lines of JavaScript code, making everyone’s coding life easier and more comfortable. This concludes the introduction to the HTML5 practical and analysis form - automatically obtaining the focus attribute (autofocus attribute). I hope it will be helpful to everyone in HTML5 applications.

The above is the content of the HTML5 actual combat and analysis form - automatically obtaining the focus attribute (autofocus attribute). For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!