jquery实现页面虚拟键盘特效

用法简介：
jquery页面虚拟键盘设计带有数字与字母切换功能。
文件引用：

//给输入的密码框添加新值 function addValue（newValue） { CapsLockValue==0?$（".input_cur"）.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" class="shuru input_cur" ><br><script>//定义当前是否大写的状态 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 （" ------数字----"）; 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><input 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=符号 ></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=字母></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=清空 ></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 （" ------字母----"）;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="切换数字"></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_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="setCapsLock（this）;" value="切换大写"></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 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="addValue（"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 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="clearValue（）;" value=清空 ></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（"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 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>"）; //给输入的密码框添加新值 function addValue（newValue） {CapsLockValue==0?$（".input_cur"）.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>

演示效果：

屏幕键盘在网络生活中很常见，比如使用网银或在线查询信用卡余额，在输入密码等敏感数据时，应该就会用到屏幕键盘。以防止被木马或恶意程序捕获盗取实际键盘上的操作。希望本文能够对大家有所帮助。