请教用JS怎么实现上下键选择？

设计手 2017-09-08 09:23:47



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>测试下拉</title>

<style type="text/css">

.SoSuoDa{display:inline-block;position:relative;_zoom:1;_display:inline;}

.SoSuo{z-index:99;visibility:hidden;border:1px solid #888;background:#FFF;position:absolute;text-align:left;width:99.6%;margin-top:24px;}

.SoSuo a{display:block;text-decoration:none;padding-left:5px;border-bottom:#CCC 1px dashed;height:24px;line-height:24px;font-size:14px;overflow:hidden;}



</style>

</head>

<script type="text/javascript">

function AjaxSo(Select_One_ID)

{	

	document.getElementById(Select_One_ID).style.visibility ='visible'; 

}

</script>



<body>

<div align="center" style="margin:2px;">

  



   <span class="SoSuoDa" id="HI" style="width:360px;border:1px solid red;">

    <div id="soso" class="SoSuo" onmouseover="document.getElementById('soso').style.visibility='visible';" onmouseout="document.getElementById('soso').style.visibility='hidden';">

     <a href="javascript:void(0)">怎么上下键选择12</a>

	 <a href="javascript:void(0)">怎么上下键选择34</a>

	 <a href="javascript:void(0)">怎么上下键选择56</a>

    </div>

    <input name="username" id="username" style="width:99%" maxlength="40" onclick="AjaxSo('soso');">

   </span>



</div>

</body>

</html>

输入框触发显示隐藏的层，然后想使用上下键选择内容，请教怎么实现？

...全文

548 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

设计手 2017-09-09

打赏
举报

太感谢了！困扰我多时的代码被你几分钟搞定！！ csdn出大神啊！佩服！十分感谢showbo兄弟的大力帮助！

斯洛文尼亚旅游 2017-09-08

打赏
举报

引用 3 楼 zyw147 的回复:

不好意思，貌似IE不支持？刚在火狐测试挺完美的，试了下IE不支持啊？

没注意看，编辑器ide直接给classList了代码中 as[cur].classList='on' 改为 as[cur].className='on'

设计手 2017-09-08

打赏
举报

不好意思，貌似IE不支持？刚在火狐测试挺完美的，试了下IE不支持啊？

设计手 2017-09-08

打赏
举报

哦买噶，这么牛！

佩服！佩服！佩服！非常感谢！

斯洛文尼亚旅游 2017-09-08

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>测试下拉</title>
<style type="text/css">
.SoSuoDa{display:inline-block;position:relative;_zoom:1;_display:inline;}
.SoSuo{z-index:99;visibility:hidden;border:1px solid #888;background:#FFF;position:absolute;text-align:left;width:99.6%;margin-top:24px;}
.SoSuo a{display:block;text-decoration:none;padding-left:5px;border-bottom:#CCC 1px dashed;height:24px;line-height:24px;font-size:14px;overflow:hidden;}
 .SoSuo a.on{background:#666;color:#fff}
</style>
</head>
<script type="text/javascript">
    function AjaxSo(Select_One_ID) {
        document.getElementById(Select_One_ID).style.visibility = 'visible';
    }
    var cur = -1;
    function checkKeyCode(e) {
        var as = document.getElementById('soso').getElementsByTagName('a');
        switch (e.keyCode) {
            case 38://上
                if (cur == -1) cur = as.length - 1;
                else {
                    as[cur].className = ''; cur -= 1;
                }
                if (cur < 0) cur = as.length - 1;
                as[cur].classList = 'on'
                break;
            case 40://下
                if (cur == -1) cur = 0;
                else {
                    as[cur].className = '';
                    cur++;
                }
                if (cur >= as.length) cur = 0;
                as[cur].classList='on'
                break;
            case 13://回车选择
                if (cur != -1) document.getElementById('username').value = as[cur].innerHTML;
                break;
        }
    }
</script>
 
<body>
<div align="center" style="margin:2px;">
   
 
   <span class="SoSuoDa" id="HI" style="width:360px;border:1px solid red;">
    <div id="soso" class="SoSuo" onmouseover="document.getElementById('soso').style.visibility='visible';" onmouseout="document.getElementById('soso').style.visibility='hidden';">
     <a href="javascript:void(0)">怎么上下键选择12</a>
     <a href="javascript:void(0)">怎么上下键选择34</a>
     <a href="javascript:void(0)">怎么上下键选择56</a>
    </div>
    <input name="username" id="username" style="width:99%" maxlength="40" onclick="AjaxSo('soso');" autocomplete="off" onkeydown="checkKeyCode(event)">
   </span>
 
</div>
</body>
</html>

Web开发学习资料推荐
jqGrid导航Navigator配置
easyui datagrid fitColumns:true失效解决办法