주석 : 이제 간단한 HTML 기능을 사용하면 페이지가로드 된 후 필요한 요소에 대한 입력 초점을 자동으로 찾을 수 있습니다. AutoFocus라는 속성을 통해 완료됩니다. 관심있는 친구들은 그것에 대해 배울 수 있습니다.
원본 텍스트 : html5 autofocus 속성
원래 출시일 : 2012 년 8 월 27 일
번역 시간 : 2013 년 8 월 6 일
HTML5는 우리를 위해 많은 훌륭한 것들을 출시했습니다.
과거에는 양식 확인, 입력 상자 공백 프롬프트 (입력 자리 표시 자), 클라이언트 파일 업로드 및 다운로드 (클라이언트 측 파일 이름 지정) 및 오디오/비디오 재생과 같은 JavaScript 및 Flash로 완료하고자하는 작업을 기본 HTML로 완료 할 수 있습니다. 또 다른 간단한 HTML 기능을 사용하면 페이지가로드 된 후 필요한 요소에 대한 입력 초점을 자동으로 찾아 AutoFocus라는 속성을 통해 완료 할 수 있다는 것입니다.
코드는 다음과 같이 간단합니다.
<!-이 모든 것이 작동합니다! ->
<input autofocus = "autofocus" />
<버튼 AUTOFOCUS = "AUTOFOCUS"> HI! </button>
<TextArea autofocus = "autofocus"> </textRea>
자동 초점 속성이 설정되면 페이지가로드 된 후 입력, 텍스트 및 버튼 요소가 자동으로 선택됩니다 (즉, 초점을 얻습니다). 다른 요소 (예 : H1 태그), tabindex = 0을 시도했지만 자동 초점 속성은 이러한 요소에 전혀 영향을 미치지 않습니다.
이 속성은 주요 목적이 Google HomePage (검색에 99%의 사례가 사용되는) 또는 온라인 설치 마법사 (예 : WordPress 설치 프로그램)와 같은 정보를 수집하는 페이지를 얻는 주요 목적에 유용합니다. 그리고 가장 중요한 것은 JavaScript에 참여가 필요하지 않다는 것입니다.
전체 페이지 코드는 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<title> html5 자동 초점 속성 테스트 </title>
<meta content = "editplus">
<meta content = "[email protected]">
<meta content = "original = http : //davidwalsh.name/autofocus">
</head>
<body>
<!- 원칙적으로 다음 세 가지 요소 중 하나만 설정할 수 있습니다. 여러 요소가 설정되면 마지막 요소는 초점을 얻어야합니다.
<!-
->
<div>
<input autofocus = "autofocus" />
<버튼 AUTOFOCUS = "AUTOFOCUS"> HI! </button>
<TextArea autofocus = "autofocus"> </textArea>
</div>
</body>
</html>