JS使用方向键控制选择项目的文本框

2024-09-05 12:18:14

字体：大中小

来源：转载

供稿：网友

JS使用方向键控制选择项目的文本框，其实我觉得不是太实用，不过做为研究JavaScript的学习资料，共享出来供有需要的参阅，代码中屏蔽了回车，可有效防止回车键触发表单提交。

<!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><title>JS使用方向键控制选择项目的文本框</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">#divSelect{border:1px solid red;width:208px !important;width:210px;}#divSelect ul{width:200px;margin:3px;margin-left:-35px;*margin-left:3px;overflow:hidden;}#divSelect ul li{float:left;list-style-type:none;width:45px;height:14px;line-height:20px;font:14px arial;text-align:center;padding:2px;}#divSelect li:hover{background:green;cursor:pointer;}#txtInput{width:205px;}</style></head><body><form method="post" action="##"><input type="text" id="txtInput" value="" autocomplete="off" onkeydown="if(event.keyCode==13)return false;"><div id="divSelect"></div><script type="text/javascript">var list="<ul>"list+="<li>123a</li><li>战争片</li><li>动作片</li><li>爱情片</li><li>剧情片</li><li>记录片</li><li>fbac</li><li>bbca</li><li>defe</li><li>gzza</li><li>恐怖片</li><li>古装片</li><li>电视剧</li><li>读书</li><li >小说</li><li>作品集</li><li>历史</li><li>诗歌</li><li >散文</li><li>军事</li>";list+="</ul>"document.getElementById('divSelect').innerHTML=list;</script></form><script type="text/javascript"></script></body></html>

上一篇：鼠标经过内容展开的JS代码

下一篇：jQuery cookie的使用例子