JS实现电脑虚拟键盘的操作_第1页
JS实现电脑虚拟键盘的操作_第2页
JS实现电脑虚拟键盘的操作_第3页
JS实现电脑虚拟键盘的操作_第4页
JS实现电脑虚拟键盘的操作_第5页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、JS实现电脑虚拟键盘的操作本文实例为大家分享了JS实现电脑虚拟键盘的具体代码，供大家参考，具体内容如下需求：当输入框光标聚焦时，电脑虚拟键盘弹出点击输入框弹出键盘点击输入框弹出键盘BackspaceCapsLockShiftEnterShiftJ0pJEEIZIIZEqEJ匚£陞亡hlcmJf/Ut|FnSpace在输入框输入内容时，键盘跟着变化HemehelloEB0030QQQQQD3jnnnnnnnFinnriismiICri|m|Spaceininicriia具体实现代码如下：CpsLockShiftAltSpace部分:<metaname="viewport

2、"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><linkrel="stylesheet"href="/font-awesome/4.7.0/css/font-awesome.css"rel="externalnofollow"><l

3、inkrel="stylesheet"href="./index.css">vtitle>电脑键盘的实现v/title></head><body><divclass="input_box">vinputtype="text"id="myinput"placeholder点击输入框弹出键盘"value=""/></div>vdivclass="keyBoard">v/di

4、v>vscriptsrc="./jquery-1.11.0.min.js">v/script>vscriptsrc="./index.js">v/script>vscript>v/script>v/body>v/html>CSS部分：body*margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif;.keyBoardmax-width:800px;padding:20px;position:abso

5、lute;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;.keybackground-color:rgb(243,243,243);border:2pxsolidblack;border-radius:5px;grid-column:span2;f

6、ont-size:12px;text-align:center;/*padding-top:17px;*/cursor:pointer;line-height:35px;font-weight:700;.key:hoverborder:1pxsolid#eeeeee;.backspacegrid-column:span4;.tabgrid-column:span3;.backslashgrid-column:span3;.capslockgrid-column:span4;.entergrid-column:span4;.leftshiftgrid-column:span5;.rightshi

7、ftgrid-column:span5;.leftctrlgrid-column:span3;.microsoftgrid-column:span3;font-size:14px;.spacegrid-column:span13;.input_boxwidth:400px;height:60px;/*border:1pxsolidblack;*/margin:auto;margin-top:100px;.input_boxinputoutline:none;border:none;width:100%;height:100%;border:2pxsolid#ccc;border-radius:

8、8px;padding:10px;font-size:30px;JSvarkeyArray='key_name':'、'，'key_val':'192','key_name':'1','key_val':'49','key_name':'2','key_val':'50','key_name':'3','key_val':'51','

9、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&

10、#39;,'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','k

11、ey_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&#

12、39;,'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'

13、;:'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','

14、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':&

15、#39;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_

16、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&#

17、39;:'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','

18、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':'1

19、91','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

20、9;,'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',varkeyBoa

21、rd=document.getElementsByClassName('keyBoard')0functionrenderKeyBoard(keyArray)vartemplate=''for(vari=0;i<keyArray.length;i+)if(keyArrayi.key_val='8')template+="<divclass='keybackspace'data-key='"+keyArrayi.key_val+"'>"+keyArrayi.k

22、ey_name+"</div>"elseif(keyArrayi.key_val='9')template+="<divclass='keytab'data-key='"+keyArrayi.key_val+"'>"+keyArrayi.key_name+"</div>"elseif(keyArrayi.key_val='220')template+="<divclass='keybacksl

23、ash'data-key='"+keyArrayi.key_val+"'>"+keyArrayi.key_name+"</div>"elseif(keyArrayi.key_val='20')template+="<divclass='keycapslock'data-key='"+keyArrayi.key_val+"'>"+keyArrayi.key_name+"</div>&q

24、uot;elseif(keyArrayi.key_val='13')template+="<divclass='keyenter'data-key='"+keyArrayi.key_val+"'>"+keyArrayi.key_name+"</div>"elseif(keyArrayi.key_val='16')template+="<divclass='keyleftshift'data-key='&quo

25、t;+keyArrayi.key_val+"'>"+keyArrayi.key_name+"</div>"elseif(keyArrayi.key_val='16')template+="<divclass='keyrightshift'data-key='"+keyArrayi.key_val+"'>"+keyArrayi.key_name+"</div>"elseif(keyArrayi.key

26、_val='17')template+="<divclass='keyleftctrl'data-key='"+keyArrayi.key_val+"'>"+keyArrayi.key_name+"</div>"elseif(keyArrayi.key_val='36')template+="<divclass='keymicrosoft'data-key='"+keyArrayi.key_val+

27、"'>"+keyArrayi.key_name+"</div>"elseif(keyArrayi.key_val='32')template+="<divclass='keyspace'data-key='"+keyArrayi.key_val+"'>"+keyArrayi.key_name+"</div>"elsetemplate+="<divclass='key'data-key='"+keyArrayi.key_val+"'>"+keyArrayi.key_name+"</div>"/console.log(template)keyBoar

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论