网站不支持m.域名,上海最近新闻事件,徐州京都网架公司,网站开发项目说明书本文实例为大家分享了JS实现电脑虚拟键盘的具体代码#xff0c;供大家参考#xff0c;具体内容如下需求#xff1a;1.当输入框光标聚焦时#xff0c;电脑虚拟键盘弹出2.在输入框输入内容时#xff0c;键盘跟着变化具体实现代码如下#xff1a;Html部分#xff1a;电脑键…本文实例为大家分享了JS实现电脑虚拟键盘的具体代码供大家参考具体内容如下需求1.当输入框光标聚焦时电脑虚拟键盘弹出2.在输入框输入内容时键盘跟着变化具体实现代码如下Html部分电脑键盘的实现CSS部分body * {margin: 0;padding: 0;box-sizing: border-box;font-family: Arial, Helvetica, sans-serif;}.keyBoard{max-width: 800px;padding: 20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: rgb(197, 197, 197);border-radius: 10px;display: none;grid-template-columns: repeat(30, 15px);grid-template-rows: repeat(5, 35px);grid-gap: 5px;}.key {background-color: rgb(243, 243, 243);border: 2px solid black;border-radius: 5px;grid-column: span 2;font-size: 12px;text-align: center;/* padding-top: 17px; */cursor: pointer;line-height: 35px;font-weight: 700;}.key:hover {border: 1px solid #eeeeee;}.backspace {grid-column: span 4;}.tab {grid-column: span 3;}.backslash {grid-column: span 3;}.capslock {grid-column: span 4;}.enter {grid-column: span 4;}.leftshift {grid-column: span 5;}.rightshift {grid-column: span 5;}.leftctrl {grid-column: span 3;}.microsoft {grid-column: span 3;font-size: 14px;}.space {grid-column: span 13;}.input_box{width: 400px;height: 60px;/* border: 1px solid black; */margin: auto;margin-top: 100px;}.input_box input{outline: none;border: none;width: 100%;height: 100%;border: 2px solid #ccc;border-radius: 8px;padding: 10px;font-size: 30px;}JS部分var keyArray [{ key_name: , key_val: 192 },{ key_name: 1, key_val: 49 },{ key_name: 2, key_val: 50 },{ key_name: 3, key_val: 51 },{ key_name: 4, key_val: 52 },{ key_name: 5, key_val: 53 },{ key_name: 6, key_val: 54 },{ key_name: 7, key_val: 55 },{ key_name: 8, key_val: 56 },{ key_name: 9, key_val: 57 },{ key_name: 0, key_val: 48 },{ key_name: -, key_val: 189 },{ key_name: , key_val: 187 },{ key_name: Backspace, key_val: 8 },{ key_name: Tab, key_val: 9 },{ key_name: Q, key_val: 81 },{ key_name: W, key_val: 87 },{ key_name: E, key_val: 69 },{ key_name: R, key_val: 82 },{ key_name: T, key_val: 84 },{ key_name: Y, key_val: 89 },{ key_name: U, key_val: 85 },{ key_name: I, key_val: 73 },{ key_name: O, key_val: 79 },{ key_name: P, key_val: 80 },{ key_name: [, key_val: 219 },{ key_name: ], key_val: 221 },{ key_name: \\ , key_val: 220 },{ key_name: CapsLock, key_val: 20 },{ key_name: A, key_val: 65 },{ key_name: S, key_val: 83 },{ key_name: D, key_val: 68 },{ key_name: F, key_val: 70 },{ key_name: G, key_val: 71 },{ key_name: H, key_val: 72 },{ key_name: J, key_val: 74 },{ key_name: K, key_val: 75 },{ key_name: L, key_val: 76 },{ key_name: ;, key_val: 186 },{ key_name: , key_val: 222 },{ key_name: Enter, key_val: 13 },{ key_name: Shift, key_val: 16 },{ key_name: Z, key_val: 90 },{ key_name: X, key_val: 88 },{ key_name: C, key_val: 67 },{ key_name: V, key_val: 86 },{ key_name: B, key_val: 66 },{ key_name: N, key_val: 78 },{ key_name: M, key_val: 77 },{ key_name: ,, key_val: 188 },{ key_name: ., key_val: 190 },{ key_name: /, key_val: 191 },{ key_name: Shift, key_val: 16 },{ key_name: Ctrl, key_val: 17 },{ key_name: Alt, key_val: 18 },{ key_name: Home, key_val: 36 },{ key_name: Space, key_val: 32 },{ key_name: Home, key_val: 36 },{ key_name: Alt, key_val: 18 },{ key_name: Ctrl, key_val: 17 },{ key_name: Fn, key_val: 00 },]var keyBoard document.getElementsByClassName(keyBoard)[0]function renderKeyBoard(keyArray) {var template ;for (var i 0; i keyArray.length; i) {if (keyArray[i].key_val 8) {template keyArray[i].key_name ;} else if (keyArray[i].key_val 9) {template keyArray[i].key_name ;} else if (keyArray[i].key_val 220) {template keyArray[i].key_name ;} else if (keyArray[i].key_val 20) {template keyArray[i].key_name ;} else if (keyArray[i].key_val 13) {template keyArray[i].key_name ;} else if (keyArray[i].key_val 16) {template keyArray[i].key_name ;} else if (keyArray[i].key_val 16) {template keyArray[i].key_name ;} else if (keyArray[i].key_val 17) {template keyArray[i].key_name ;} else if (keyArray[i].key_val 36) {template keyArray[i].key_name ;}else if (keyArray[i].key_val 32) {template keyArray[i].key_name ;}else {template keyArray[i].key_name ;}}// console.log(template)keyBoard.innerHTML template;}renderKeyBoard(keyArray)var key_div document.getElementsByClassName(key);// console.log(key_div)$(#myinput).on(focus, function (e) {// console.log(e.keyCode)keyBoard.style.display grid});$(#myinput).on(keydown, function (e) {console.log(e.target.value)if(e.target.value ! ){for (var i 0; i key_div.length; i) {var key_val Number(key_div[i].getAttribute(data-key));if (key_val e.keyCode) {key_div[i].style.color #fff;key_div[i].style.backgroundColor #9F79EE} else {key_div[i].style.color key_div[i].style.backgroundColor }}}});$(#myinput).on(keyup, function (e) {for (var i 0; i key_div.length; i) {key_div[i].style.color key_div[i].style.backgroundColor }});$(#myinput).on(blur, function (e) {// console.log(e.keyCode)keyBoard.style.display none});以上就是本文的全部内容希望对大家的学习有所帮助也希望大家多多支持脚本之家。
