Jquery implements webpage virtual keyboard effects and jquery Effects

Jquery implements webpage virtual keyboard effects and jquery Effects

Usage:

The jquery web page virtual keyboard is designed with the number and letter switching function.

File Reference:

// Add the new value function addValue (newValue) {CapsLockValue = 0? $ (". Input_cur "). val ($ (". shuru "). val () + newValue): $ (". input_cur "). val ($ (". shuru "). val () + newValue. toUpperCase ()} // clear function clearValue () {$ (". input_cur "). val ("") ;}// function BackSpace () {var longnum =$ (". input_cur "). val (). length; var num; num = $ (". input_cur "). val (). substr (0, longnum-1); $ (". input_cur "). val (num);} function changePanl (oj) {$ ("#" + oj ). siblings ("div "). hide (); $ ("#" + oj ). show () ;}// you can specify whether to use uppercase values. function setCapsLock (o) {if (CapsLockValue = 0) {CapsLockValue = 1; $ (o ). val ("Convert lowercase"); $. each ($ (". I _button_zm "), function (B, c) {$ (c ). val ($ (c ). val (). toUpperCase () ;}) ;}else {CapsLockValue = 0; $ (o ). val ("Convert uppercase"); $. each ($ (". I _button_zm "), function (B, c) {$ (c ). val ($ (c ). val (). toLowerCase () ;}}} window. onload = function () {// changePanl ("zimu ");}

CSS

. Softkeyboard {display: inline-block ;}. softkeyboard td {padding: 4px ;}. c_panel {background-color: #333; text-align: center; padding: 15px ;}. input_cur {border: 1px solid # f00 ;}. I _button {border: none; height: 40px; width: 50px; font-size: 16px; font-family: ""; background-color: #666; color: # fff ;}. I _button: active {background-color: #999 ;}. I _button_num {}. I _button_btn {float: right; width: 88px ;}. I _button_bs {float: right; width: 148px ;}

HTML

<Input type = "text" name = "text1" class = "shuru input_cur"> <br> <script> // defines whether the current uppercase state var CapsLockValue = 0; var curEditName; var check; // document. write ('<DIV align = center id = \ "softkeyboard \" name = \ "softkeyboard \" style = \ "position: absolute; left: 300px; top: 320px; width: 517px; z-index: 180; display: none \ "> '); document. write ('<DIV class = \ "softkeyboard \" id = \ "softkeyboard \" name = \ "softkeyboard \" style = \" Display:; \ "> '); // document. write ('------ number ----'); document. write ('<div class = \ "c_panel shuzi \" id = "shuzi">'); document. write ('<table align = \ "center \" width = \ "100% \" border = \ "0 \" cellspacing = \ "0 \" cellpadding = \ "0 \"> '); document. write ('<tr>'); document. write ('<td> <input class = "I _button I _button_num" type = button onclick = \ "addValue (\ '7 \'); \ "value = \" 7 \ "> </td> '); document. write ('<td> <inpu T class = "I _button I _button_num" type = button onclick = \ "addValue (\ '8 \ '); \" value = \ "8 \"> </td> '); document. write ('<td> <input class = "I _button I _button_num" type = button onclick = \ "addValue (\ '9 \'); \ "value = \" 9 \ "> </td> '); document. write ('<td> <input class = "I _button I _button_btn I _button_sz" onclick = \ "changePanl (\ 'zimu \'); \ "type = button value = symbol> </td> '); document. write ('</tr>'); document. write (' <Tr> '); document. write ('<td> <input class = "I _button I _button_num" type = button onclick = \ "addValue (\ '4 \'); \ "value = \" 4 \ "> </td> '); document. write ('<td> <input class = "I _button I _button_num" type = button onclick = \ "addValue (\ '5 \'); \ "value = \" 5 \ "> </td> '); document. write ('<td> <input class = "I _button I _button_num" type = button onclick = \ "addValue (\ '6 \'); \ "value = \" 6 \ "> </td> '); document. write ('<td> <Input class = "I _button I _button_btn I _button_sz" onclick = \ "changePanl (\ 'zimu \ '); \" type = button value = letter> </td>'); document. write ('</tr>'); document. write ('<tr>'); document. write ('<td> <input class = "I _button I _button_num" type = button onclick = \ "addValue (\ '1 \'); \ "value = \" 1 \ "> </td> '); document. write ('<td> <input class = "I _button I _button_num" type = button onclick = \ "addValue (\ '2 \'); \" value = \ "2 \ "> </Td> '); document. write ('<td> <input class = "I _button I _button_num" type = button onclick = \ "addValue (\ '3 \'); \ "value = \" 3 \ "> </td> '); document. write ('<td> <input class = "I _button I _button_btn" type = button onclick = \ "clearValue (); \" value = clear> </td>'); document. write ('</tr>'); document. write ('<tr>'); document. write ('<td> <input class = "I _button I _button_num" type = button onclick = \ "addValue (\ '0 \ '); \ "Value = \" 0 \ "> </td>'); document. write ('<td> </td>'); document. write ('<td colspan = 2> <input class = "I _button I _button_bs" type = button value = \ "BackSpace \" onclick = \ "backspace (); \ "> </td> '); document. write ('</tr>'); document. write ('</table>'); document. write ('</DIV>'); // document. write ('------------------------------------------'); // document. write ('------ letter ----'); document. write ('< Div class = \ "c_panel zimu \" id = \ "zimu \" style = \ "display: none; \"> '); document. write ('<table align = \ "center \" width = \ "98% \" border = \ "0 \" cellspacing = \ "0 \" cellpadding = \ "0 \"> '); document. write ('<tr>'); document. write ('<td> <input class = "I _button I _button_fh" type = button onclick = \ "addValue (\'~ \ '); \ "Value = \"~ \ "> </Td> '); document. write (' <td> <input class =" I _button I _button_fh "type = button onclick = \" addValue (\'! \ '); \ "Value = \"! \ "> </Td> '); document. write ('<td> <input class = "I _button I _button_fh" type = button onclick = \ "addValue (\'@\'); \ "value = \" @ \ "> </td> '); document. write ('<td> <input class = "I _button I _button_fh" type = button onclick = \ "addValue (\'#\'); \ "value = \" # \ "> </td> '); document. write ('<td> <input class = "I _button I _button_fh" type = button onclick = \ "addValue (\' $ \'); \ "value = \" $ \ "> </td> '); document. write ('<td> <Input class = "I _button I _button_fh" type = button onclick = \ "addValue (\ '% \'); \ "value = \" % \ "> </td> '); document. write ('<td> <input class = "I _button I _button_fh" type = button onclick = \ "addValue (\' ^ \'); \ "value = \" ^ \ "> </td> '); document. write ('<td> <input class = "I _button I _button_fh" type = button onclick = \ "addValue (\'*\'); \ "value = \" * \ "> </td> '); document. write ('<td> <input class = "I _button I _button_fh "Type = button onclick = \" addValue (\ '); \ "value = \" (\ "> </td>'); document. write ('<td> <input class = "I _button I _button_fh" type = button onclick = \ "addValue (\'); \" value = \") \ "> </td> '); document. write ('<td> <input class = "I _button I _button_fh" type = button onclick = \ "addValue (\'-\'); \ "value = \"-\ "> </td> '); document. write ('<td> <input class = "I _button I _button_fh" type = button onclick = \ "addValue (\ '+ \'); \ "Value = \" + \ "> </td> '); document. write ('<td> <input class = "I _button I _button_fh" type = button onclick = \ "addValue (\' = \'); \ "value = \" = \ "> </td> '); document. write ('<td> <input class = "I _button I _button_btn" type = button onclick = \ "changePanl (\ 'shuzi \'); \ "value = \" Switch number \ "> </td> '); document. write ('</tr>'); document. write ('<tr>'); document. write ('<td> <input class = "I _button I _button_zm" type = Button onclick = \ "addValue (\ 'q \ '); \" value = \ "q \"> </td>'); document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\ 'W \'); \ "value = \" w \ "> </td> '); document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\ 'E \'); \ "value = \" e \ "> </td> '); document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\ 'r \');\ "Value = \" r \ "> </td> '); document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\'t \'); \ "value = \" t \ "> </td> '); document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\ 'y \'); \ "value = \" y \ "> </td> '); document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\ 'U \'); \ "value = \" u \ "> </td> '); document. Write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\' I \'); \ "value = \" I \ "> </td> '); document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\ 'o \'); \ "value = \" o \ "> </td> '); document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\ 'P \'); \ "value = \" p \ "> </td> '); document. write ('<td> <input class = "I _butto N I _button_fh "type = button onClick = \" addValue (\ '[\'); \ "value = \" [\ "> </td> '); document. write ('<td> <input class = "I _button I _button_fh" type = button onClick = \ "addValue (\'] \ '); \ "value = \"] \ "> </td> '); document. write ('<td> <input class = "I _button I _button_fh" type = button onClick = \ "addValue (\'{\'); \ "value = \" {\ "> </td> '); document. write ('<td> <input class = "I _button I _button_btn" type = button onClic K = \ "setCapsLock (this); \" value = \ "Switch capital \"> </td> '); document. write ('</tr>'); document. write ('<tr>'); document. write ('<td> <input class = "I _button I _button_fh" type = button onClick = \ "addValue (\' | \'); \ "value = \" | \ "> </td> '); document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\ 'a \'); \ "value = \" a \ "> </td> '); document. write ('<td> <input class = "I _button _ Zm "type = button onclick = \" addValue (\'s \ '); \ "value = \" s \ "> </td>'); document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\ 'd \'); \ "value = \" d \ "> </td> '); document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\ 'f \'); \ "value = \" f \ "> </td> '); document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValu E (\ 'G \ '); \ "value = \" g \ "> </td>'); document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\ 'H \'); \ "value = \" h \ "> </td> '); document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\ 'J \'); \ "value = \" j \ "> </td> '); document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\ 'K \'); \ "value = \" k \ "> </td> '); Document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\ 'l \'); \ "value = \" l \ "> </td> '); document. write ('<td> <input class = "I _button I _button_fh" type = button onclick = \ "addValue (\'; \ '); \" value = \"; \ "> </td> '); document. write ('<td> <input class = "I _button I _button_fh" type = button onclick = \ "addValue (\': \ '); \" value = \": \ "> </td> '); document. write ('<td> <input clas S = "I _button I _button_fh" type = button onClick = \ "addValue (\ '} \'); \" value = \ "} \"> </td> '); document. write ('<td> <input class = "I _button I _button_btn" type = button onclick = \ "clearValue (); \" value = clear> </td>'); document. write ('</tr>'); document. write ('<tr>'); document. write ('<td> <input class = "I _button I _button_fh" type = button onclick = \ "addValue (\'_\'); \ "value = \" _ \ "> </td> '); document. write ('<t D> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\ 'z \'); \ "value = \" z \ "> </td> '); document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\ 'x \'); \ "value = \" x \ "> </td> '); document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\ 'C \'); \ "value = \" c \ "> </td> '); document. write ('<td> <input class = "I _button _ Zm "type = button onclick = \" addValue (\ 'v \ '); \ "value = \" v \ "> </td>'); document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\' B \'); \ "value = \" B \ "> </td> '); document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\ 'n \'); \ "value = \" n \ "> </td> '); document. write ('<td> <input class = "I _button I _button_zm" type = button onclick = \ "addValue (\'M \ '); \ "value = \" m \ "> </td>'); document. write ('<td> <input class = "I _button I _button_fh" type = button onClick = \ "addValue (\' <\'); \ "value = \" <\ "> </td> '); document. write ('<td> <input class = "I _button I _button_fh" type = button onClick = \ "addValue (\'> \'); \ "value = \" >\"> </td> '); document. write ('<td> <input class = "I _button I _button_fh" type = button onClick = \ "addValue (\'/\'); \ "value = \"/\ "> </td> '); Document. write ('<td> <input class = "I _button I _button_fh" type = button onClick = \ "addValue (\'? \ '); \ "Value = \"? \ "> </Td> '); document. write ('<td colspan = 2> <input class = "I _button I _button_bs" type = button value = \ "BackSpace \" onclick = \ "backspace (); \ "> </td> '); document. write ('</tr>'); document. write ('</table>'); document. write ('</div>'); // document. write ('------------------------------------------'); document. write ('</DIV>'); // Add the new function addValue (newValue) {CapsLockValue = 0? $ (". Input_cur "). val ($ (". shuru "). val () + newValue): $ (". input_cur "). val ($ (". shuru "). val () + newValue. toUpperCase ()} // clear function clearValue () {$ (". input_cur "). val ("") ;}// function BackSpace () {var longnum =$ (". input_cur "). val (). length; var num; num = $ (". input_cur "). val (). substr (0, longnum-1); $ (". input_cur "). val (num);} function changePanl (oj) {$ ("#" + oj ). siblings ("div "). hide (); $ ("#" + oj ). show () ;}// you can specify whether to use uppercase values. function setCapsLock (o) {if (CapsLockValue = 0) {CapsLockValue = 1; $ (o ). val ("Convert lowercase"); $. each ($ (". I _button_zm "), function (B, c) {$ (c ). val ($ (c ). val (). toUpperCase () ;}) ;}else {CapsLockValue = 0; $ (o ). val ("Convert uppercase"); $. each ($ (". I _button_zm "), function (B, c) {$ (c ). val ($ (c ). val (). toLowerCase () ;}}} window. onload = function () {// changePanl ("zimu") ;}</script>

Demo effect:

Screen keyboards are common in online life. For example, you can use online banking or online credit card balance queries to enter passwords and other sensitive data. To prevent Trojans or malicious programs from capturing and stealing operations on the actual keyboard. I hope this article will help you.