HTML5 的 autofocus

HTML5新增了input的新屬性叫做autofocus
所謂autofocus就是當頁面載入後會自動取得該處為焦點，
也就是滑鼠的游標會預設先停在那。

      

your id:<input type="text" name="id" autofocus>

your pw: <input type="password" name="pwd"><br>

-----------------這-是-華-麗-的-分-隔-線----------------------------

your id:<input type="text" name="id"><br>

your pw: <input type="password" name="pwd"><br>

廣義的來說，就是這樣。
不過，有些瀏覽器的限制，大部分瀏覽器已經支援，除IE9(含IE9)以下。

[補充@20130416]
如果同一個頁面同時有好幾個autofocus
像這樣:
<textarea autofocus="autofocus"></textarea>
<textarea autofocus="autofocus"></textarea>
<textarea autofocus="autofocus"></textarea>
<textarea autofocus="autofocus"></textarea>
<textarea autofocus="autofocus"></textarea>
<textarea autofocus="autofocus"></textarea>
Chrome, Opera, Safari會以最後一個為作為焦點。
Firefox會以第一個做為焦點。





可寫javascript來確定是否該瀏覽器有支援autofocus:

<script type="text/javascript">

   console.log("autofocus" in document.createElement("input"));

</script>

檢驗input是否有autofocus屬性，回傳值是bool，你會得到true或是false值，
像在chrome就可以得到true:

在IE9就會得到false:

在沒有autofocus的情況下如何模擬autofocus的效果?
可以考慮試試看使用javascript的focus去對焦在不支援autofocus的瀏覽器的時候

<script type="text/javascript">

 if( !("autofocus" in document.createElement("input")) ){

   document.getElementById("your_id").focus();

   console.log("i catch you!");

 }

</script>

補充:
http://modernizr.com/ 
http://zh.wikipedia.org/wiki/Modernizr
Modernizr也能幫我們做確認html5是否有支援那些屬性的功能


參考:
http://www.w3schools.com/tags/att_input_autofocus.asp
http://diveintohtml5.info/forms.html