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