用法简介：
jquery页面虚拟键盘设计带有数字与字母切换功能。
文件引用：
//给输入的密码框添加新值 function addValue(newValue) { CapsLockValue==0").val($(".shuru").val()+ newValue):$(".input_cur").val($(".shuru").val()+ newValue.toUpperCase()) } //清空 function clearValue() { $(".input_cur").val(""); } //实现BackSpace键的功能 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(); } //设置是否大写的值 function setCapsLock(o) { if (CapsLockValue==0){ CapsLockValue=1; $(o).val("转化小写"); $.each($(".i_button_zm"),function(b, c) { $(c).val($(c).val().toUpperCase()); }); }else{ CapsLockValue=0; $(o).val("转化大写"); $.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" ><br> <script> //定义当前是否大写的状态 var CapsLockValue=0; var curEditName; var check; //document.write (' <DIV align=center id="softkeyboard" name="softkeyboard">'); document.write (' <DIV id="softkeyboard" name="softkeyboard">'); //document.write (' ------数字----'); document.write (' <div id="shuzi">'); document.write ('<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">'); document.write (' <tr> '); document.write (' <td><input type=button onclick="addValue('7');" value=" 7 "></td>'); document.write (' <td><input type=button onclick="addValue('8');" value=" 8 "></td>'); document.write (' <td><input type=button onclick="addValue('9');" value=" 9 "></td>'); document.write (' <td><input onclick="changePanl('zimu');" type=button value=符号 ></td>'); document.write (' </tr>'); document.write (' <tr> '); document.write (' <td><input type=button onclick="addValue('4');" value=" 4 "></td>'); document.write (' <td><input type=button onclick="addValue('5');" value=" 5 "></td>'); document.write (' <td><input type=button onclick="addValue('6');" value=" 6 "></td>'); document.write (' <td><input onclick="changePanl('zimu');" type=button value=字母></td>'); document.write (' </tr>'); document.write (' <tr> '); document.write (' <td><input type=button onclick="addValue('1');" value=" 1 "></td>'); document.write (' <td><input type=button onclick="addValue('2');" value=" 2 "></td>'); document.write (' <td><input type=button onclick="addValue('3');" value=" 3 "></td>'); document.write (' <td><input type=button onclick="clearValue();" value=清空 ></td>'); document.write (' </tr>'); document.write (' <tr> '); document.write (' <td><input type=button onclick="addValue('0');" value=" 0 "></td>'); document.write (' <td></td>'); document.write (' <td colspan=2><input type=button value=" BackSpace" onclick="backspace();"></td>'); document.write (' </tr>'); document.write (' </table>'); document.write ('</DIV>'); //document.write ('--------------------------------------------'); //document.write (' ------字母----'); document.write (' <div id="zimu">'); document.write (' <table align="center" width="98%" border="0" cellspacing="0" cellpadding="0">'); document.write (' <tr> '); document.write (' <td><input type=button onclick="addValue('~');" value=" ~ "></td>'); document.write (' <td><input type=button onclick="addValue('!');" value=" ! "></td>'); document.write (' <td><input type=button onclick="addValue('@');" value=" @ "></td>'); document.write (' <td><input type=button onclick="addValue('#');" value=" # "></td>'); document.write (' <td><input type=button onclick="addValue('$');" value=" $ "></td>'); document.write (' <td><input type=button onclick="addValue('%');" value=" % "></td>'); document.write (' <td><input type=button onclick="addValue('^');" value=" ^ "></td>'); document.write (' <td><input type=button onclick="addValue('*');" value=" * "></td>'); document.write (' <td><input type=button onclick="addValue('(');" value=" ( "></td>'); document.write (' <td><input type=button onclick="addValue(')');" value=" ) "></td>'); document.write (' <td><input type=button onclick="addValue('-');" value=" - "></td>'); document.write (' <td><input type=button onclick="addValue('+');" value=" + "></td>'); document.write (' <td><input type=button onclick="addValue('=');" value=" = "></td>'); document.write (' <td><input type=button onclick="changePanl('shuzi');" value="切换数字"></td>'); document.write (' </tr>'); document.write (' <tr> '); document.write (' <td><input type=button onclick="addValue('q');" value=" q "></td>'); document.write (' <td><input type=button onclick="addValue('w');" value=" w "></td>'); document.write (' <td><input type=button onclick="addValue('e');" value=" e "></td>'); document.write (' <td><input type=button onclick="addValue('r');" value=" r "></td>'); document.write (' <td><input type=button onclick="addValue('t');" value=" t "></td>'); document.write (' <td><input type=button onclick="addValue('y');" value=" y "></td>'); document.write (' <td><input type=button onclick="addValue('u');" value=" u "></td>'); document.write (' <td><input type=button onclick="addValue('i');" value=" i "></td>'); document.write (' <td><input type=button onclick="addValue('o');" value=" o "></td>'); document.write (' <td><input type=button onclick="addValue('p');" value=" p "></td>'); document.write (' <td><input type=button onClick="addValue('[');" value=" [ "></td>'); document.write (' <td><input type=button onClick="addValue(']');" value=" ] "></td>'); document.write (' <td><input type=button onClick="addValue('{');" value=" { "></td>'); document.write (' <td><input type=button onClick="setCapsLock(this);" value="切换大写"></td>'); document.write (' </tr>'); document.write (' <tr> '); document.write (' <td><input type=button onClick="addValue('|');" value=" | "></td>'); document.write (' <td><input type=button onclick="addValue('a');" value=" a "></td>'); document.write (' <td><input type=button onclick="addValue('s');" value=" s "></td>'); document.write (' <td><input type=button onclick="addValue('d');" value=" d "></td>'); document.write (' <td><input type=button onclick="addValue('f');" value=" f "></td>'); document.write (' <td><input type=button onclick="addValue('g');" value=" g "></td>'); document.write (' <td><input type=button onclick="addValue('h');" value=" h "></td>'); document.write (' <td><input type=button onclick="addValue('j');" value=" j "></td>'); document.write (' <td><input type=button onclick="addValue('k');" value=" k "></td>'); document.write (' <td><input type=button onclick="addValue('l');" value=" l "></td>'); document.write (' <td><input type=button onclick="addValue(';');" value=" ; "></td>'); document.write (' <td><input type=button onclick="addValue(':');" value=" : "></td>'); document.write (' <td><input type=button onClick="addValue('}');" value=" } "></td>'); document.write (' <td><input type=button onclick="clearValue();" value=清空 ></td>'); document.write (' </tr>'); document.write (' <tr> '); document.write (' <td><input type=button onclick="addValue('_');" value=" _ "></td>'); document.write (' <td><input type=button onclick="addValue('z');" value=" z "></td>'); document.write (' <td><input type=button onclick="addValue('x');" value=" x "></td>'); document.write (' <td><input type=button onclick="addValue('c');" value=" c "></td>'); document.write (' <td><input type=button onclick="addValue('v');" value=" v "></td>'); document.write (' <td><input type=button onclick="addValue('b');" value=" b "></td>'); document.write (' <td><input type=button onclick="addValue('n');" value=" n "></td>'); document.write (' <td><input type=button onclick="addValue('m');" value=" m "></td>'); document.write (' <td><input type=button onClick="addValue('<');" value=" < "></td>'); document.write (' <td><input type=button onClick="addValue('>');" value=" > "></td>'); document.write (' <td><input type=button onClick="addValue('/');" value=" / "></td>'); document.write (' <td><input type=button onClick="addValue('" "></td>'); document.write (' <td colspan=2><input type=button value=" BackSpace" onclick="backspace();"></td>'); document.write (' </tr>'); document.write (' </table>'); document.write (' </div>'); //document.write ('--------------------------------------------'); document.write ('</DIV>'); //给输入的密码框添加新值 function addValue(newValue) { CapsLockValue==0").val($(".shuru").val()+ newValue):$(".input_cur").val($(".shuru").val()+ newValue.toUpperCase()) } //清空 function clearValue() { $(".input_cur").val(""); } //实现BackSpace键的功能 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(); } //设置是否大写的值 function setCapsLock(o) { if (CapsLockValue==0){ CapsLockValue=1; $(o).val("转化小写"); $.each($(".i_button_zm"),function(b, c) { $(c).val($(c).val().toUpperCase()); }); }else{ CapsLockValue=0; $(o).val("转化大写"); $.each($(".i_button_zm"),function(b, c) { $(c).val($(c).val().toLowerCase()); }); } } window.onload=function(){ // changePanl("zimu"); } </script>
演示效果：
屏幕键盘在网络生活中很常见，比如使用网银或在线查询信用卡余额，在输入密码等敏感数据时，应该就会用到屏幕键盘。以防止被木马或恶意程序捕获盗取实际键盘上的操作。希望本文能够对大家有所帮助。
【jquery实现页面虚拟键盘特效】相关文章：