要求&思路:
1.ul默认隐藏,当input获得焦点时显示,失去焦点时隐藏
2.给li设置鼠标移入事件
3.lisObj是伪数组,通过Array.from()方法转化为真数组并遍历,获得当前鼠标移入对应的当前li的索引
4.将当前li的内容显示到input中
5.给input设置键盘按下事件,判断为上下键的的键码时通过index的自增自减上下选择
5.index设置最值以免报错
6.eve.which监听键盘输入:针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键或按钮
代码:(样式不用看)
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
#cont {
width: 300px;
margin: 40px auto;
}
input {
width: 296px;
height: 40px;
}
ul {
background: #eee;
display: none;
}
ul li {
line-height: 30px;
text-indent: 20px;
border-bottom: solid 1px black;
}
/* 让选中的li变色 */
ul li.active {
background: #ccc;
}