實現"輸入框"獲得焦點時外邊框變藍

要想將父元素div變成focusable，只需要在元素上設置 tabindex 屬性，然後通過:focus僞類設置父元素div 獲得焦點時的border樣式。

.dianji:{
        border: 1px solid transparent;
}
.dianji:focus{
  	border: 1px solid #58a6e7;
  	outline: 0;
}

哪些元素是 focusable的？

搜索結果：

根據 DOM Level 2 HTML規範，focusable 的DOM元素都會有一個原生的focus()方法，只有 focusable 的DOM 元素纔有 focus 事件，才能使用:focus僞類。擁有原生的focus()方法的DOM元素包括幾種：HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement and HTMLAnchorElement。很明顯，規範中遺漏了HTMLButtonElement and HTMLAreaElement。

雖然規範這麼定義，但瀏覽器在實現時卻是另外一套。瀏覽器給任何一個 HTMLElement 都定義focus()方法，但並不是任何一個HTMLElement 都能獲得焦點（獲得焦點術語叫 active, 具體請參考：http://help.dottoro.com/ljqmdirr.php）。一般來說，任何一個時刻HTML 文檔中只會有一個active元素，但並不是任何一個元素都能成爲active元素。能成爲active 的元素包括：

1. 表單元素(form controllers)：input/option/textarea/button

2. 鏈接元素(links)：a標籤、area標籤（必須要帶 href 屬性，包括 href 屬性爲空）

3. 可以被編輯的元素（包括通過添加 contenteditable = "true"屬性變成可編輯的情況）

4. 設置了 tabindex 屬性（tabindex 值非-1）的元素

5. window：當頁面窗口從隱藏變成前置可見時，focus 事件就會觸發

查看原文