JS實(shí)現(xiàn)電腦虛擬鍵盤的操作_第1頁
JS實(shí)現(xiàn)電腦虛擬鍵盤的操作_第2頁
JS實(shí)現(xiàn)電腦虛擬鍵盤的操作_第3頁
JS實(shí)現(xiàn)電腦虛擬鍵盤的操作_第4頁
JS實(shí)現(xiàn)電腦虛擬鍵盤的操作_第5頁
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、JS實(shí)現(xiàn)電腦虛擬鍵盤的操作本文實(shí)例為大家分享了JS實(shí)現(xiàn)電腦虛擬鍵盤的具體代碼，供大家參考，具體內(nèi)容如下需求：當(dāng)輸入框光標(biāo)聚焦時(shí)，電腦虛擬鍵盤彈出點(diǎn)擊輸入框彈出鍵盤點(diǎn)擊輸入框彈出鍵盤BackspaceCapsLockShiftEnterShiftJ0pJEEIZIIZEqEJ匚£陞亡hlcmJf/Ut|FnSpace在輸入框輸入內(nèi)容時(shí)，鍵盤跟著變化HemehelloEB0030QQQQQD3jnnnnnnnFinnriismiICri|m|Spaceininicriia具體實(shí)現(xiàn)代碼如下：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>電腦鍵盤的實(shí)現(xiàn)v/title></head><body><divclass="input_box">vinputtype="text"id="myinput"placeholder點(diǎn)擊輸入框彈出鍵盤"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等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論