2013年4月16日 星期二

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

沒有留言:

張貼留言

若你看的文章,時間太久遠的問題就別問了,因為我應該也忘了... XD

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...