淺談頁面中的焦點

一、前言

這篇文章主要是講跟頁面中焦點相關的東西，算是一個小的總結，目測應該沒有比我更無聊的人會去寫這方面東西把~

二、正文

本文希望精簡一點，是以用問答形式來寫把。

問題一:頁面載入完成時，浏覽器焦點在什麼位置？

 這個問題很大程度取決于浏覽器。我測試了一些浏覽器發現。

1: 在Chrome中，焦點預設在body上面。

2: 在IE中，焦點應該是在浏覽器上面而不是頁面上。（IE不同版本之間貌似還有差别，不過我沒有具體去研究）

那麼，如果設定預設的焦點位置呢？

方法一: 通過Javascript來設定

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

這樣，ID為ele的元素就會獲得焦點，一個常見的需求就是讓頁面的一個input預設獲得焦點，通過這句話就可以解決。

方法二: 使用HTML5定義的新屬性autofocus

為元素加上autofocus屬性可以讓其自動獲得焦點，相容現代浏覽器和IE10+

<input type="text" autofocus />      

就像這樣，這個input在頁面載入後會自動獲得焦點。

之後，焦點的位置基本取決于你滑鼠點選的位置，大部分情況下會是在body或者一些表單元素上面

問題二:tabindex屬性是幹嘛的?

相信很多人看到過這個屬性，但是都是一帶而過。簡而言之，tabindex是用來控制焦點切換順序的。

很多時候，我們會用到焦點完全是用TAB鍵的時候，而tabindex屬性就是決定你用tab鍵切換焦點時候的順序。

舉個例子

<input  value="1" type="text" tabindex="1">
<input  value="4" type="text" tabindex="4">
<input  value="2" type="text" tabindex="2">
<input  value="3" type="text" tabindex="3">      

比如上面這段代碼，本來你用tab鍵切換焦點時，是按照HTML的順序來的。但是如果你設定了tabindex，那麼焦點切換順序将會是按照tabindex的值的大小來的。其實關于這個tabindex，司徒正美的這篇部落格講的很詳細了，就不多說了。

問題三:如何知道目前焦點在哪個元素上?

怎麼知道目前焦點在哪裡呢，雖然很少情況需要知道這個，但是DOM還是提供了接口去得到這個。

那就是通過document.activeElement來實作，這個屬性可以得到目前焦點的DOM元素的引用，具體可以看文檔，相容性良好。

在jQuery中，也可以通過

$("*:focus") //獲得焦點的元素
$("input:focus") //獲得焦點的input元素      

類似這樣代碼去得到。

轉載本站文章請注明作者和出處 奇葩一朵朵 – http://www.cnblogs.com/season-huang/ ，請勿用于任何商業用途