資訊專欄INFORMATION COLUMN
摘要：元素中的焦點(diǎn)管理焦點(diǎn)元素表單元素或者等以及如何查看當(dāng)前焦點(diǎn)元素返回當(dāng)前頁(yè)面中獲得焦點(diǎn)的元素，也就是說(shuō)，如果此時(shí)用戶按下了鍵盤(pán)上某個(gè)鍵，會(huì)在該元素上觸發(fā)鍵盤(pán)事件。使用定義的新屬性，可以讓元素自動(dòng)獲得焦點(diǎn)。
DOM 元素中的焦點(diǎn)管理 1. 焦點(diǎn)元素
表單元素（input、select 或者 textarea 等）
以及 document.body
2. 如何查看當(dāng)前焦點(diǎn)元素document.activeElement：返回當(dāng)前頁(yè)面中獲得焦點(diǎn)的元素，也就是說(shuō)，如果此時(shí)用戶按下了鍵盤(pán)上某個(gè)鍵，會(huì)在該元素上觸發(fā)鍵盤(pán)事件。該屬性是只讀的。
Chrome 頁(yè)面加載后默認(rèn)的焦點(diǎn)元素是 document.body
https://developer.mozilla.org...
3. 如何讓元素獲得焦點(diǎn)1）頁(yè)面交互：點(diǎn)擊 input 輸入框等。
2）JS代碼：HTMLElement.focus() 方法可以設(shè)置指定元素獲取焦點(diǎn)。
3）使用 HTML5 定義的新屬性 autofocus，可以讓元素自動(dòng)獲得焦點(diǎn)。
例如
這樣 input 會(huì)在頁(yè)面載入后會(huì)自動(dòng)獲得焦點(diǎn)。
注意：普通 DOM 元素，想要獲得焦點(diǎn)，需要先設(shè)置 tabindex="-1" 屬性，再通過(guò)頁(yè)面交互或者 focus 方式，讓其獲得焦點(diǎn)。
4. 如何讓元素失去焦點(diǎn)1）頁(yè)面交互：點(diǎn)擊頁(yè)面其他地方
2）JS代碼：HTMLElement.blur() blur方法用來(lái)移除當(dāng)前元素所獲得的鍵盤(pán)焦點(diǎn)。
5. tabindex 屬性tabindex 屬性的作用是：當(dāng)用 tab 鍵遍歷切換頁(yè)面的表單元素時(shí)，按照 tabindex 的大小決定順序。
當(dāng)普通 DOM 元素設(shè)置屬性 tabindex="-1" 時(shí)，可將其成為焦點(diǎn)元素。
更多 tableindex 相關(guān)：http://www.cnblogs.com/rubylo...
更多博客：https://github.com/Lmagic16/blog
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117387.html
摘要：元素中的焦點(diǎn)管理焦點(diǎn)元素表單元素或者等以及如何查看當(dāng)前焦點(diǎn)元素返回當(dāng)前頁(yè)面中獲得焦點(diǎn)的元素，也就是說(shuō)，如果此時(shí)用戶按下了鍵盤(pán)上某個(gè)鍵，會(huì)在該元素上觸發(fā)鍵盤(pán)事件。使用定義的新屬性，可以讓元素自動(dòng)獲得焦點(diǎn)。 DOM 元素中的焦點(diǎn)管理 1. 焦點(diǎn)元素 表單元素（input、select 或者 textarea 等） 以及 document.body 2. 如何查看當(dāng)前焦點(diǎn)元素 documen...
摘要：元素中的焦點(diǎn)管理焦點(diǎn)元素表單元素或者等以及如何查看當(dāng)前焦點(diǎn)元素返回當(dāng)前頁(yè)面中獲得焦點(diǎn)的元素，也就是說(shuō)，如果此時(shí)用戶按下了鍵盤(pán)上某個(gè)鍵，會(huì)在該元素上觸發(fā)鍵盤(pán)事件。使用定義的新屬性，可以讓元素自動(dòng)獲得焦點(diǎn)。 DOM 元素中的焦點(diǎn)管理 1. 焦點(diǎn)元素 表單元素（input、select 或者 textarea 等） 以及 document.body 2. 如何查看當(dāng)前焦點(diǎn)元素 documen...
摘要：取得所有類中包含和的元素。類名的先后順序無(wú)所謂取得為的元素中帶有類名的所有元素焦點(diǎn)管理也添加了輔助管理焦點(diǎn)的功能。首先就是屬性，這個(gè)屬性始終會(huì)引用中當(dāng)前獲得了焦點(diǎn)的元素。另外就是新增了方法，這個(gè)方法用于確定文檔是否獲得了焦點(diǎn)。 選擇符API querySelector()方法 // 取得body元素 var tbody = document.querySelector(body);...
摘要：取得所有類中包含和的元素。類名的先后順序無(wú)所謂取得為的元素中帶有類名的所有元素焦點(diǎn)管理也添加了輔助管理焦點(diǎn)的功能。首先就是屬性，這個(gè)屬性始終會(huì)引用中當(dāng)前獲得了焦點(diǎn)的元素。另外就是新增了方法，這個(gè)方法用于確定文檔是否獲得了焦點(diǎn)。 選擇符API querySelector()方法 // 取得body元素 var tbody = document.querySelector(body); ...
閱讀 3306·2023-04-26 02:40
閱讀 4652·2021-09-22 15:22
閱讀 1596·2021-09-22 10:02
閱讀 3488·2021-08-11 10:23
閱讀 1399·2019-08-30 15:55
閱讀 2499·2019-08-30 12:48
閱讀 592·2019-08-30 11:04
閱讀 710·2019-08-29 16:29
