This article describes the JS implementation of the keyboard and arrow keys to select text and display in the text box method. Share to everyone for your reference. The implementation methods are as follows:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103-104 | <! 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>SimulateUpDownKeySelect.html</title> <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; > <!--prevent the ENTER key to submit onKeyPress--> <div id= "Divselect" > </div> <script type= "Text/javascript" > var list= "<ul>" list+= "<li> sci-fi film </li><li> war film </li><li> action movies </li><li> love movies </li><li> drama </li><li> documentary </li> <li> Comprehensive Art </li><li> comedy </li><li> cartoon </li><li> inspirational movie </li><li> horror film </li><li> Costume Film </li><li> TV series </li><li> reading </li><li > novel </li>< Li> Works </li><li> History </li><li> Poetry </li><li > Prose </li><li> military </li > "; list+= "</ul>" document.getElementById (' Divselect '). Innerhtml=list; </script> </form> <script type= "Text/javascript" > <!--function $ (sId) {return document.getElementById (SID); The function Clearselectedoptbgcolor (target) {if (target.seletedindex >= 0) Target.options[target.seletedindex]. Style.background = "";} function Setselectedoptbgcolor (target) {target.options[target.seletedindex].style.background = "green"; } var upkeycode = 38; var downkeycode = 40; var enterkeycode = 13; var oinput = $ ("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.keycod e) {case 37:clearselectedoptbgcolor (this); this.seletedindex--if (This.seletedindex < 0) This.seletedindex = THIS.O Ptions.length-1; This.value = this.options[this.seletedindex].innerhtml; Setselectedoptbgcolor (this); Break Case 38: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 Case 39:clearselectedoptbgcolor (this); this.seletedindex++; if (This.seletedindex >= this.options.length) this.seletedindex = 0; This.value = this.options[this.seletedindex].innerhtml; SetselecteDoptbgcolor (this); Break Case 40: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 Case enterKeyCode:this.value = this.options[this.seletedindex].innerhtml; Alert (' AA ') break; } }; Oinput.onblur = function () {clearselectedoptbgcolor (this); this.seletedindex = 1;}; --> </script> </body> </html> |
The
wants this article to help you with your JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
