HTML5 연습 및 분석 양식 - 포커스 속성(autofocus 속성) 자동 획득

HTML5에 새로운 기능이 많이 추가되었습니다. Menglong Station에서는 이에 대해 천천히 소개하겠습니다. 오늘은 HTML5 Form에 새로 추가된 포커스 속성을 소개해 드리겠습니다.

HTML5는 autofocus 속성을 지원하는 브라우저에서 이 속성이 설정되어 있으면 JavaScript를 사용하지 않고도 자동으로 해당 필드로 포커스를 이동하여 동적으로 포커스를 얻을 수 있습니다. 간단한 예는 다음과 같습니다:

　HTML 코드

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

　미리보기 효과

위 코드가 브라우저에서 정상적으로 실행되도록 하기 위해 자동 초점이 설정된 경우 이 속성이 설정되었는지 여부는 JavaScript에서 감지되어야 합니다. 설정된 경우 focus() 메서드를 호출할 필요가 없습니다.

　JavaScript 코드

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

　HTML 코드

아아아아

　미리보기 효과

로 인해 autofocus 부울 속성이므로 지원되는 브라우저에서는 해당 값이 "true"이고, 지원되지 않는 브라우저에서는 해당 값이 빈 문자열입니다. 위 코드는 autofocus가 true가 아닌 경우에만 focus() 메서드를 호출하므로 향후 호환성이 보장됩니다. 자동 초점 속성을 지원하는 브라우저에는 Firefox 4+, Safari 5+, Chrome 및 Opera 9.6이 포함됩니다.

기본적으로 양식에만 초점을 맞출 수 있습니다. 다른 레이블 요소의 경우 먼저 tabIndex 속성을 -1로 설정한 후 focus() 메서드를 호출하면 해당 요소에도 포커스가 지정될 수 있지만 Opera만 이 기술을 지원하지 않습니다.

HTML5는 정말 모든 사람의 코딩 생활을 매우 단순하게 만들어줍니다. 작은 속성으로 한 줄 또는 여러 줄의 JavaScript 코드가 절약되어 모든 사람의 코딩 생활이 더 쉽고 편안해집니다. 이것으로 HTML5 실제 및 분석 양식에 대한 소개를 마칩니다. 자동으로 포커스 속성(autofocus 속성)을 가져오는 것이 HTML5 애플리케이션의 모든 사람에게 도움이 되기를 바랍니다.

위는 HTML5의 실제 및 분석 형태입니다. - focus 속성(autofocus 속성)을 자동으로 얻는 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!