jquery實現(xiàn)頁面虛擬鍵盤特效
用法簡介:
jquery頁面虛擬鍵盤設(shè)計帶有數(shù)字與字母切換功能。
文件引用:
//給輸入的密碼框添加新值 function addValue(newValue) { CapsLockValue==0?$(".input_cur").val($(".shuru").val()+ newValue):$(".input_cur").val($(".shuru").val()+ newValue.toUpperCase()) } //清空 function clearValue() { $(".input_cur").val(""); } //實現(xiàn)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(); } //設(shè)置是否大寫的值 function setCapsLock(o) { if (CapsLockValue==0){ CapsLockValue=1; $(o).val("轉(zhuǎn)化小寫"); $.each($(".i_button_zm"),function(b, c) { $(c).val($(c).val().toUpperCase()); }); }else{ CapsLockValue=0; $(o).val("轉(zhuǎn)化大寫"); $.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> //定義當前是否大寫的狀態(tài) 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 (' ------數(shù)字----'); 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=\"切換數(shù)字\"></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(""); } //實現(xiàn)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(); } //設(shè)置是否大寫的值 function setCapsLock(o) { if (CapsLockValue==0){ CapsLockValue=1; $(o).val("轉(zhuǎn)化小寫"); $.each($(".i_button_zm"),function(b, c) { $(c).val($(c).val().toUpperCase()); }); }else{ CapsLockValue=0; $(o).val("轉(zhuǎn)化大寫"); $.each($(".i_button_zm"),function(b, c) { $(c).val($(c).val().toLowerCase()); }); } } window.onload=function(){ // changePanl("zimu"); } </script>
演示效果:
屏幕鍵盤在網(wǎng)絡(luò)生活中很常見,比如使用網(wǎng)銀或在線查詢信用卡余額,在輸入密碼等敏感數(shù)據(jù)時,應(yīng)該就會用到屏幕鍵盤。以防止被木馬或惡意程序捕獲盜取實際鍵盤上的操作。希望本文能夠?qū)Υ蠹矣兴鶐椭?/p>
相關(guān)文章
jQuery 錨點跳轉(zhuǎn)滾動條平滑滾動一句話代碼
jQuery 錨點跳轉(zhuǎn)滾動條平滑滾動一句話代碼,需要的朋友可以參考下。2010-04-04jQuery實現(xiàn)的感應(yīng)鼠標懸停圖片色彩漸顯效果
這篇文章主要介紹了jQuery實現(xiàn)的感應(yīng)鼠標懸停圖片色彩漸顯效果,涉及jQuery中hover、find、css等方法的使用技巧,需要的朋友可以參考下2015-03-03jQuery EasyUI API 中文文檔 - Parser 解析器
jQuery EasyUI API 中文文檔 - Parser 解析器,使用jQuery EasyUI的朋友可以參考下。2011-09-09