js dom focus() blur() onfocus onblur - Kaiqisan

js dom focus() blur() onfocus onblur

ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,今天没有开场白，乏了乏了，直接进入正题。

focus(): 给支持被聚焦的元素获取焦点（button / input / select / a /area/ textarea/frame/option）或者设置了contenteditable = "true"的不支持聚焦的元素(PS：这个谨慎使用，一旦使用，可以可视化操作当前html元素内容和位置，一顿胡乱操作容易让您的HTML代码结构混乱，可以在有特殊情况的时候使用)

如果目前页面没有聚焦元素的话body标签就是当前的聚焦元素

如果您想知道当前的页面有哪些元素是可聚焦的，可以点击tab键来一一确认，元素聚焦之后就会有新的样式，默认是会在元素外层产生一层蓝色的外围。

/

如果您不喜欢目前的默认聚焦样式，您还可以自己设定

input:focus {
	outline: 0;
}

这样设定之后，该元素获取聚焦的时候就不会产生任何样式的变化。然后除此之外也可以自己DIY其他样式

blur(): 如果当前元素正处于聚焦中的，就取消它的聚焦状态。

参考代码

<button class="btn">click</button>
<input type="text" class="input" contenteditable="false"/>

let a = document.getElementsByClassName('btn')[0]
let b = document.getElementsByClassName('input')[0]
a.onclick = () => {
    b.focus()
    setTimeout(() => {
        b.blur()
    }, 1000)
}

---

onfocus: 注册一个监听事件。检测当前的元素，如果它进入了focus状态，那么执行里面的方法

<input type="text" class="input" contenteditable="false"/>

let a = document.getElementsByClassName('input')[0]
a.onfocus = () => {
    console.count()
}

然后，每一次点击输入框，试图输入内容的时候，console栏里面都会弹出新的东西。

a.addEventListener('focus', () => {
    console.count()
}) // 这样也可以

blur: 方法和原理同上

总结

这个功能多用于输入框和提交信息上面，在网页全局上面，可以应用于无障碍设计，这个功能面向没有鼠标只有键盘的用户群体，就是用户即使没有鼠标，只靠tab按键对元素的聚焦来代替滚轮，这样之后就可以顺畅地读完整个网页。