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 */
    }
}