说明
一般用于文本输入框，当控件 获取焦点、失去焦点 时，触发事件，执行函数
事件类型
传统写法：
- blur：失去焦点事件
- focus：获取焦点事件
新写法
提示：需要搭配 addEventListener() 写法绑定事件，否则可能会不可用
- focusout:失去焦点事件
- focusin:获取焦点事件
例子
传统写法
用户名：<input type="text" id="username">
<div id="msg"></div>
<script>
document.getElementById("username").onfocus = function(){
console.log("获取焦点")
// 在 msg div上显示：6-18个字符
// 获取 id 是 msg的dom对象（html中的标签）
var divObj = document.getElementById("msg")
// 设置标签中的文字
divObj.innerHTML = "6-18个字符"
}
document.getElementById("username").onblur = function(){
console.log("失去焦点")
// 获取 id 是 msg的dom对象（html中的标签）
var divObj = document.getElementById("msg")
// 设置标签中的文字是空字符串，作用是清空
divObj.innerHTML = ""
}
</script>
新写法
用户名：<input type="text" id="username">
<div id="msg"></div>
<script>
document.getElementById("username").addEventListener("focusin",function(){
console.log("获取焦点")
})
document.getElementById("username").addEventListener("focusout",function(){
console.log("失去焦点")
})
</script>
案例1
获取焦点时，清空警告，类似 网易邮箱登录
html：
姓名：<input type="text" id="username"> <span id="username_warn" class="warn"></span><br>
<input type="button" id="sbt" value="提交">
css：
<style>
.warn{
color: red;
}
</style>
JavaScript:
// 给按钮绑定事件
document.getElementById("sbt").addEventListener("click",function(){
let username = document.getElementById("username").value
if(username === ""){
document.getElementById("username_warn").innerText = "请输入用户名！"
}
console.log("模拟提交代码。。。。")
})
// 给 姓名控件增加获取焦点事件，清空警告
document.getElementById("username").addEventListener("focusin",function () {
console.log(1111)
document.getElementById("username_warn").innerText = ""
})
案例2
失去焦点，校验手机号格式
html：
手机号：<input type="text" id="phone" > <span id="phone_warn" class="warn"></span><br>
<input type="button" id="sbt" value="提交">
css：
<style>
.warn{
color: red;
}
</style>
JavaScript：
// 当手机号控件失去焦点时，就做校验
document.getElementById("phone").addEventListener("focusout",function () {
let phone = this.value
let res = /^1[345678]\d{9}$/.test(phone)
console.log("res:",res)
if(!res){
document.getElementById("phone_warn").innerText = "请正确输入手机号！"
}else{
document.getElementById("phone_warn").innerText = ""
}
})