js实现键盘上下左右键选择文字并显示在文本框的方法
本文实例讲述了js实现键盘上下左右键选择文字并显示在文本框的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>SimulateUpDownKeySelect.html</title>
<styletype="text/css">
#divSelect{border:1pxsolidred;width:208px!important;width:210px;}
#divSelectul{width:200px;margin:3px;margin-left:-35px;*margin-left:3px;overflow:hidden}
#divSelectulli{float:left;list-style-type:none;width:45px;height:14px;line-height:20px;font:14pxarial;text-align:center;padding:2px}
#divSelectli:hover{background:green;cursor:pointer}
#txtInput{width:205px;}
</style>
</head>
<body>
<formmethod="post"action="##">
<inputtype="text"id="txtInput"value=""autocomplete="off"onkeydown="if(event.keyCode==13)returnfalse;"/>
<!--
防止回车键触发表单提交
onKeyPress
-->
<divid="divSelect">
</div>
<scripttype="text/javascript">
varlist="<ul>"
list+="<li>科幻片</li><li>战争片</li><li>动作片</li><li>爱情片</li><li>剧情片</li><li>记录片</li><li>综艺片</li><li>喜剧片</li><li>动画片</li><li>励志片</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>
<scripttype="text/javascript">
<!--
function$(sId)
{
returndocument.getElementById(sId);
}
functionclearSelectedOptBgColor(target)
{
if(target.seletedIndex>=0)
target.options[target.seletedIndex].style.background="";
}
functionsetSelectedOptBgColor(target)
{
target.options[target.seletedIndex].style.background="green";
}
varupKeyCode=38;
vardownKeyCode=40;
varenterKeyCode=13;
varoInput=$("txtInput");
oInput.options=$("divSelect").getElementsByTagName("li");
oInput.seletedIndex=-1;
oInput.focus();
//oInput.onKeyPress{}
oInput.onkeyup=function(event){
if(event==undefined)
event=window.event;
switch(event.keyCode)
{
case37:
clearSelectedOptBgColor(this);
this.seletedIndex--;
if(this.seletedIndex<0)
this.seletedIndex=this.options.length-1;
this.value=this.options[this.seletedIndex].innerHTML;
setSelectedOptBgColor(this);
break;
case38:
clearSelectedOptBgColor(this);
this.seletedIndex=this.seletedIndex-4;
if(this.seletedIndex<0)
this.seletedIndex=this.options.length-1;
this.value=this.options[this.seletedIndex].innerHTML;
setSelectedOptBgColor(this);
break;
case39:
clearSelectedOptBgColor(this);
this.seletedIndex++;
if(this.seletedIndex>=this.options.length)
this.seletedIndex=0;
this.value=this.options[this.seletedIndex].innerHTML;
setSelectedOptBgColor(this);
break;
case40:
clearSelectedOptBgColor(this);
this.seletedIndex=this.seletedIndex+4;
if(this.seletedIndex>=this.options.length)
this.seletedIndex=0;
this.value=this.options[this.seletedIndex].innerHTML;
setSelectedOptBgColor(this);
break;
caseenterKeyCode:
this.value=this.options[this.seletedIndex].innerHTML;
//alert('aa')
break;
}
};
oInput.onblur=function(){
clearSelectedOptBgColor(this);
this.seletedIndex=1;
};
//-->
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。