今天给大家分享一下前端JavaScript事件类型(鼠标事件,焦点事件,键盘事件,文本事件)中的焦点事件问题。
焦点事件最典型的例子就是我们的表单获得 / 失去光标,我们先来看一下示例图:
这个是怎么实现的呢?
主要用到的就是我们JavaScript中的事件监听,来监听我们焦点事件的两个动作:①focus 获得焦点 ②blur 失去焦点
大家可以动手去敲一下代码,下面是我敲的实现上面图片的代码:
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
.mi {
position: relative;
width: 223px;
margin: 100px auto;
}
.mi input {
width: 100%;
height: 30px;
border: 1px solid #e0e0e0;
outline: none;
font-size: 16px;
line-height: 30px;
padding: 0 10px;
}
.mi .search {
border: 1px solid #ff6700;
}
.mi .list {
display: none;
position: absolute;
left: 0;
top: 30px;
width: 223px;
border: 1px solid #ff6700;
border-top: 0;
background-color: #fff;
}
.list li a {
display: block;
padding: 6px 15px;
font-size: 12px;
color: #424242;
text-decoration: none;
}
.list li a:hover {
background-color: #eee;
}
</style>
<body>
<div class="mi">
<input type="search" data-sch="find" placeholder="小米手机最新款">
<ul class="list">
<li> <a href="#">小米手机1号</a> </li>
<li> <a href="#">小米手机2号</a> </li>
<li> <a href="#">小米手机3号</a> </li>
<li> <a href="#">小米手机4号</a> </li>
<li> <a href="#">小米手机5号</a> </li>
<li> <a href="#">小米手机6号</a> </li>
</ul>
</div>
<script>
// 1. 获取元素
const input = document .querySelector(`[data-sch="find"]`)
const list = document .querySelector(`.mi .list`)
// 2.监听事件
input.addEventListener('focus' , function() {
list.style.display = `block`
input.classList.add(`search`)
})
input.addEventListener('blur' , function() {
list.style.display = `none`
input.classList.remove(`search`)
})
</script>
</body>
在给标签类名的时候用了data-sch=“find”只是为了复习一下自定义命名法。