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>');								 
 1/6    1 2 3 4 5 6 下一页 尾页