DOM 元素中的焦點管理

DOM 元素中的焦點管理

1. 焦點元素

表單元素（input、select 或者 textarea 等）

以及 document.body

2. 如何查看當前焦點元素

document.activeElement：返回當前頁面中得到焦點的元素，也就是說，若是此時用戶按下了鍵盤上某個鍵，會在該元素上觸發鍵盤事件。該屬性是隻讀的。

Chrome 頁面加載後默認的焦點元素是 document.body

https://developer.mozilla.org...

3. 如何讓元素得到焦點

1）頁面交互：點擊 input 輸入框等。

2）JS代碼：HTMLElement.focus() 方法能夠設置指定元素獲取焦點。

3）使用 HTML5 定義的新屬性 autofocus，可讓元素自動得到焦點。

例如 <input type="text" autofocus />

這樣 input 會在頁面載入後會自動得到焦點。

注意：普通 DOM 元素，想要得到焦點，須要先設置 tabindex="-1" 屬性，再經過頁面交互或者 focus 方式，讓其得到焦點。

4. 如何讓元素失去焦點

1）頁面交互：點擊頁面其餘地方

2）JS代碼：HTMLElement.blur() blur方法用來移除當前元素所得到的鍵盤焦點。

5. tabindex 屬性

tabindex 屬性的做用是：當用 tab 鍵遍歷切換頁面的表單元素時，按照 tabindex 的大小決定順序。

當普通 DOM 元素設置屬性 tabindex="-1" 時，可將其成爲焦點元素。

更多 tableindex 相關：http://www.cnblogs.com/rubylo...

---

更多博客：https://github.com/Lmagic16/blog