87,994
社区成员
发帖
与我相关
我的任务
分享请教用JS怎么实现上下键选择？
<!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>
输入框触发显示隐藏的层，然后想使用上下键选择内容，请教怎么实现？
...全文
请发表友善的回复…
发表回复
设计手 2017-09-09
- 打赏
- 举报
太感谢了！
困扰我多时的代码被你几分钟搞定！！
csdn出大神啊！佩服！
十分感谢showbo兄弟的大力帮助！
斯洛文尼亚旅游 2017-09-08
- 打赏
- 举报
没注意看，编辑器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失效解决办法
