jquery实现页面虚拟键盘特效

210 阅读 0 评论 139 点赞

我是靠谱客的博主冷傲中心，这篇文章主要介绍jquery实现页面虚拟键盘特效，现在分享给大家，希望可以做个参考。

用法简介：

jquery页面虚拟键盘设计带有数字与字母切换功能。

文件引用：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//给输入的密码框添加新值 
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

复制代码

1
2
3
4
5
6
7
8
9
.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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<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>