JS使用方向鍵控制選擇項目的文本框

2024-09-05 12:18:14

字體：大中小

供稿：網(wǎng)友

JS使用方向鍵控制選擇項目的文本框，其實我覺得不是太實用，不過做為研究JavaScript的學(xué)習(xí)資料，共享出來供有需要的參閱，代碼中屏蔽了回車，可有效防止回車鍵觸發(fā)表單提交。

<!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   class="iwvjtn8m0"   id="divSelect"></div><script type="text/javascript">var list="<ul>"list+="<li>123a</li><li>戰(zhàn)爭片</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>

上一篇：鼠標(biāo)經(jīng)過內(nèi)容展開的JS代碼

下一篇：jQuery cookie的使用例子