首頁 > web前端 > js教程 > 如何使用 JavaScript 的 focus() 函數讓 DIV 可聚焦?

如何使用 JavaScript 的 focus() 函數讓 DIV 可聚焦?

Susan Sarandon
發布: 2024-11-05 02:58:02
原創
939 人瀏覽過

How Can I Use JavaScript's focus() Function to Make a DIV Focusable?

使用JavaScript 的focus() 函數的可聚焦DIV

雖然focus() 函數通常作用於輸入欄位或按鈕等表單元素,但它也可以將焦點集中在

上元素。為此,需要為 div 指派 tabindex 屬性。

分配Tabindex

<br><div id="tries" tabindex="0">您還剩下3 次嘗試</div><br>
登入後複製

tabindex 為0 會將div 置於頁面的自然Tab 鍵順序中。正值指定 Tab 鍵順序中的特定優先權。同時,值為 -1 使得 div 只能透過腳本獲得焦點,而不能透過使用者輸入。

範例程式碼

<br>document.getElementById( 'test').onclick = function () {<p>};<br></p>
登入後複製

此腳本示範將焦點設定到 tabindex 為 -1 的 div透過使用者觸發的事件。

設定焦點 DIV 的樣式

為了直觀地指示焦點,可以使用 CSS:

<br>div:focus {<p>}<br></p>
登入後複製

透過實作這些技術,您可以成功地聚焦於

使用JavaScript 的focus() 函數的元素,增強Web應用程式的可訪問性和用戶體驗。

以上是如何使用 JavaScript 的 focus() 函數讓 DIV 可聚焦?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板