html元素聚焦和失焦總結

1. 聚焦和失焦的事件

focus     不支持冒泡，所有瀏覽器

blur       不支持冒泡，所有瀏覽器

focusin     支持冒泡，現代瀏覽器(ie 9+,chrome,firefox,safari)

focusout   支持冒泡，現代瀏覽器(ie 9+,chrome,firefox,safari)

2. 哪些元素支持聚焦

a[href]                  a標簽必須帶有href，不帶href的a不能聚焦
area[href]  
input:not([disabled])    表單元素，disabled的不能聚焦
select:not([disabled])
textarea:not([disabled]) 
button:not([disabled])   按鈕同樣是不能disabled
iframe
[tabindex]               帶有tabindex的元素
[contentEditable=true]   帶有contentEditable的元素

3. 讓div支持聚焦

給div加上tabindex或contentEditable就行了，例如：

<div tabindex="0"></div>

4. Sass代碼選擇聚焦元素

a[href],area[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),button:not([disabled]),
iframe,[tabindex],[contentEditable=true]{
    &:not([tabindex='-1'])
    {
        /* your SCSS for focusable elements goes here */
    }
}