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