<label for="name">Your name goes here :</label><input id ="name" type="text" autofocus/>
Autofocus는 위에서 보는 바와 같이 해당 태그 뒤에 그냥 autofocus라고 명시하면 바로 동작이 됩니다.
| Browsers | Autofocus Support |
|---|---|
| IE 9 Beta | |
| Firefox 4 | ✓ |
| Safari 4.0 | ✓ |
| Chrome 3.0 | ✓ |
| Opera 10 | ✓ |
하지만 Autofocus도 현재는 Internet Explorer 9은 지원하지 않고 있습니다. 그래서 여전히 Java Scriptm를 사용하는 방식도 한동안 사용할 수 밖에 없는 상황입니다.
<script>
function testAttribute(element, attribute) {
var test = document.createElement(element);
if (attribute in test) {
return true;
}
else
return false;
}
window.onload = function() {
if (!testAttribute('input', 'autofocus'))
document.getElementById('Text2').focus();
//for browser has no autofocus support, set focus to Text2.
}
</script>
<label for="Text1">Support Autofocus :</label><input id ="Text1" type="text" autofocus/> <br />
<label for="Text2">No Autofocus Support :</label><input id ="Text2" type="text" />
현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.
HTML5 강좌 전체 목록
- HTML5 DocType의 정의
- HTML5 Header stuff
- Audio
- Video
- Canvas
Canvas: Rectangle
Canvas: Shadow
Canvas: Path
Canvas: Image
Canvas: Text
- Web form 2.0
Input Attr: Placeholder
Input Attr: Autofocus
Input Attr: Required field
Input Attr: DataList
Input Type: Search
Input Type: Email, URL, Phone
Input Type: Range
Input Type: Number
Input Type: Date
Input Type: Color
- Towards Semantic Web
Semantic <mark>
Semantic <time>
Semantic <meter>
Semantic <progress>
Semantic <section>
Semantic <header>
Semantic <footer>
Semantic <nav>
Semantic <article>
Semantic <aside>
