js实现键盘上下左右键选择文字并显示在文本框的方法

这篇文章主要介绍了js实现键盘上下左右键选择文字并显示在文本框的方法,涉及javascript操作键盘事件及文本框的相关技巧,非常简单实用,需要的朋友可以参考下

本文实例讲述了js实现键盘上下左右键选择文字并显示在文本框的方法。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
6. <title>SimulateUpDownKeySelect.html</title> 
7. <style type="text/css"> 
8. #divSelect {border:1px solid red; width:208px !important;width:210px;} 
9. #divSelect ul {width:200px;margin:3px; margin-left:-35px;*margin-left:3px;overflow:hidden} 
10. #divSelect ul li {float:left; list-style-type:none;width:45px;height:14px;line-height:20px;font:14px arial;text-align:center;padding:2px} 
11. #divSelect li:hover {background :green;cursor:pointer} 
12. #txtInput {width:205px;} 
13. </style> 
14. </head> 
15. <body> 
16. <form method="post" action="##"> 
17. <input type="text" id="txtInput" value="" autocomplete="off" onkeydown="if(event.keyCode==13)return false;" /> 
18. <!-- 
19. 防止回车键触发表单提交 
20. onKeyPress 
21. --> 
22. <div id="divSelect"> 
23. </div> 
24. <script type="text/javascript"> 
25. var list="<ul>" 
26. 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>"; 
27. list+="</ul>" 
28. document.getElementById('divSelect').innerHTML=list; 
29. </script> 
30. </form> 
31. <script type="text/javascript"> 
32. <!-- 
33. function $(sId) 
34. { 
35. return document.getElementById(sId); 
36. } 
37. function clearSelectedOptBgColor(target) 
38. { 
39. if (target.seletedIndex >= 0) 
40. target.options[target.seletedIndex].style.background = ""; 
41. } 
42. function setSelectedOptBgColor(target) 
43. { 
44. target.options[target.seletedIndex].style.background = "green"; 
45. } 
46. var upKeyCode = 38; 
47. var downKeyCode = 40; 
48. var enterKeyCode = 13; 
49. var oInput = $("txtInput"); 
50. oInput.options = $("divSelect").getElementsByTagName("li"); 
51. oInput.seletedIndex = -1; 
52. oInput.focus(); 
53. //oInput.onKeyPress{} 
54. oInput.onkeyup = function(event){ 
55. if (event == undefined) 
56. event = window.event; 
57. switch (event.keyCode) 
58. { 
59. case 37: 
60. clearSelectedOptBgColor(this); 
61. this.seletedIndex--; 
62. if (this.seletedIndex < 0) 
63. this.seletedIndex = this.options.length - 1; 
64. this.value = this.options[this.seletedIndex].innerHTML; 
65. setSelectedOptBgColor(this); 
66. break; 
67. case 38: 
68. clearSelectedOptBgColor(this); 
69. this.seletedIndex= this.seletedIndex-4; 
70. if (this.seletedIndex < 0) 
71. this.seletedIndex = this.options.length - 1; 
72. this.value = this.options[this.seletedIndex].innerHTML; 
73. setSelectedOptBgColor(this); 
74. break; 
75. case 39: 
76. clearSelectedOptBgColor(this); 
77. this.seletedIndex++; 
78. if (this.seletedIndex >= this.options.length) 
79. this.seletedIndex = 0; 
80. this.value = this.options[this.seletedIndex].innerHTML; 
81. setSelectedOptBgColor(this); 
82. break; 
83. case 40: 
84. clearSelectedOptBgColor(this); 
85. this.seletedIndex= this.seletedIndex+4; 
86. if (this.seletedIndex >= this.options.length) 
87. this.seletedIndex = 0; 
88. this.value = this.options[this.seletedIndex].innerHTML; 
89. setSelectedOptBgColor(this); 
90. break; 
91. case enterKeyCode: 
92. this.value = this.options[this.seletedIndex].innerHTML; 
93. //alert('aa') 
94. break; 
95. } 
96. }; 
97. oInput.onblur = function(){ 
98. clearSelectedOptBgColor(this); 
99. this.seletedIndex = 1; 
100. }; 
101. //--> 
102. </script> 
103. </body> 
104. </html> 

希望本文所述对大家的javascript程序设计有所帮助。