1. 焦点事件
获得焦点事件
onfocus
失去焦点事件
onblur
2. 阻止默认行为
e.preventDefault()
比如:阻止超链接跳转,阻止右键点击事件
案列
<style>
input{
outline: none;
}
/* focus伪类选择器,表示获得焦点样式 */
input:focus{
background-color: lightblue;
}
</style>
<div>
<span>账号</span>
<input type="text" placeholder="请输入账号">
</div>
<div>
<span>密码</span>
<input type="password" placeholder="请输入密码">
</div>
<script>
let inputs = document.querySelectorAll('input')
inputs.forEach(r=>{
// 备份文本框的placeholder
let placeholder = r.placeholder
// 获取焦点事件
r.onfocus = function(){
// 文本框的placeholder设置为空
r.placeholder = ''
}
// 失去焦点事件
r.onblur = function(){
// 文本框的placeholder恢复
r.placeholder = placeholder
}
})
</script>