2022-05-02 用css实现下拉菜单的鼠标选中和上下键选中

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/124549019

本文介绍了如何使用CSS和JavaScript实现下拉菜单的鼠标选中及键盘上下键选中功能。当input获取焦点时显示下拉菜单，失去焦点时隐藏。通过给li元素设置鼠标移入事件，利用Array.from()方法处理li元素数组，并在键盘按下事件中判断上下键以切换选中项。同时，设置了防止index越界的保护措施。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求&思路:

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;
    }
</style>
</head>

<body>
    <div id="cont">
        <input type="text" name="" id="txt" value="" />
        <ul>
            <li>选项1</li>
            <li>选项2</li>
            <li>选项3</li>
            <li>选项4</li>
            <li>选项5</li>
            <li>选项6</li>
        </ul>
    </div>
</body>
<script>
    /*********设置鼠标选中**********/
    // 1.获取节点
    var inputObj = document.querySelector("#txt");
    var ulObj = document.querySelector("ul");
    var lisObj = ulObj.children;
    var index = -1;
    // 2.1.给input设置获得焦点事件
    inputObj.onfocus = function() {
        // 显示ul
        ulObj.style.display = 'block';
    };
    // 2.2给设置input失去焦点事件
    inputObj.onblur = function() {
        // 隐藏ul
        ulObj.style.display = 'none';
    };
    // 3.给li添加鼠标移入事件
    Array.from(lisObj).forEach(function(v, k) {
        v.onmouseover = function() {
            index = k;
            sel();
        }
    });
    /*********设置上下键选中**********/
    // 1.给input设置键盘按下事件
    inputObj.onkeydown = function(eve) {
    //eve.which用来监听键盘输入:针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮
        var code = eve.which || window.event;
        // 2.获取键盘码,若为上下键
        if (code == '38') { //按上键
            index--;
            //设置当索引值小于最小值时,令其值为lis的最大长度(变成最大值)
            if (index < 0) index = lisObj.length - 1;
            sel();
        }
        if (code == '40') { //按下键
            index++;
            //设置当索引值大于最大值时,令其值为0
            if (index > lisObj.length - 1) index = 0;
            sel();
        }
    };
    // 封装sel函数,功能:显示当前选中的li的内容
    function sel() {
        var ac = document.querySelector(".active");
        // 1.取消之前选中li
        ac && (ac.className = ''); //若当前无选中就ac
        // 2.选中当前li
        lisObj[index].className = 'active';
        // 3.当前选中的li标签的内容显示到input文本框中
        inputObj.value = lisObj[index].innerHTML;
    }
</script>