前些天写了一个基于基于jQuery的数字键盘，今天给大家带来一个基于jQuery的全字母键盘插件(支持全字母大小写切换，数字输入，退格清除，关闭功能，可调整大小和键盘位置(可设置固定在屏幕右下角)，支持鼠标和触屏拖动，并且特意保留了四个常用字符"_","-",".","/"。还有按键记忆功能哦，可自动改变使用频繁按键的背景颜色。)。
效果截图:
页面效果参照PolarBear的使用CSS3制作的苹果风格键盘 修改而成，在这里感谢PolarBear的无私分享。
一.代码分享
1.Demo页面代码
1 <ul>
2 <li><input type="text" placeholder="手机号码后四位" id="numkeyboard1" class="numkeyboard" /></li>
3 <li><input type="text" placeholder="开箱密码" id="numkeyboard2" class="numkeyboard"/></li>
4 <button type="submit"value="querun">确 认</button>
5 </ul>
键盘页面代码(插件中页面键盘的页面代码由js插入)
1 <ul id='keyboard_5xbogf8c'>
2 <li>1</li>
3 <li>2</li>
4 <li>3</li>
5 <li>4</li>
6 <li>5</li>
7 <li>6</li>
8 <li>7</li>
9 <li>8</li>
10 <li>9</li>
11 <li>0</li>
12 <li>←</li>
13 <li>Q</li>
14 <li>W</li>
15 <li>E</li>
16 <li>R</li>
17 <li>T</li>
18 <li>Y</li>
19 <li>U</li>
20 <li>I</li>
21 <li>O</li>
22 <li>P</li>
23 <li></li>
24 <li>A</li>
25 <li>S</li>
26 <li>D</li>
27 <li>F</li>
28 <li>G</li>
29 <li>H</li>
30 <li>J</li>
31 <li>K</li>
32 <li>L</li>
33 <li>Clear</li>
34 <li>CapsLock</li>
35 <li>Z</li>
36 <li>X</li>
37 <li>C</li>
38 <li>V</li>
39 <li>B</li>
40 <li>N</li>
41 <li>M</li>
42 <li><span>-</span><span>_</span></li>
43 <li><span>/</span><span>.</span></li>
44 <li>Exit</li>
45 <div id="keyboard_5xbogf8c_left"></div>
46 <div id="keyboard_5xbogf8c_right"></div>
47 </ul>
2.调用
1 $(".numkeyboard").ioskeyboard({
2 keyboardRadix:80,//键盘大小基数，实际大小比为9.4，即设置为100时实际大小为940X330
3 keyboardRadixMin:40,//键盘大小的最小值，默认为60，实际大小为564X198
4 keyboardRadixChange:true,//是否允许用户改变键盘大小,该功能仅能完美支持Chrome26；仅当keyboardRadixMin不小于60时才较好支持Safari内核浏览器
5 clickeve:true,//是否绑定元素click事件
6 colorchange:true,//是否开启按键记忆功能，如果开启，将随着按键次数的增加加深相应按键的背景颜色
7 colorchangeStep:1,//按键背景颜色改变步伐，采用RBG值，默认为RGB(255,255,255),没按一次三个数字都减去步伐值
8 colorchangeMin:154//按键背影颜色的最小值，默认为RGB(154,154,154)
9 });
3.CSS代码
1 #keyboard_5xbogf8c ,#keyboard_5xbogf8c li {
2 list-style: none;
3 margin: 0;
4 padding: 0;
5 -webkit-user-select: none;
6 -moz-user-select: none;
7 -ms-user-select: none;
8 user-select: none;
9 }
10
11 #keyboard_5xbogf8c{
12 position:fixed;
13 z-index:10;
14 width: 9.30em;
15 background: rgba(158,180,185,1);
16 background: -webkit-gradient(linear, 0 50%, 100% 0,from( rgba(158,180,185,1)) ,to(rgba(169,156,173,1)),color-stop(50%, rgba(222,157,193,1)));
17 background: linear-gradient(60deg, rgba(158,180,185,1), rgba(222,157,193,1) 50%, rgba(169,156,173,1) 100%);
18 padding-left: 0.1em;
19 border-radius: 0.05em;
20 padding-top: 0.1em;
21 box-shadow: 0 0.05em 0.1em rgba(0,0,0,.5);
22 display:none;
23 font-size:100px;
24 right:0.05em;
25 bottom:0.05em;
26 -webkit-text-size-adjust:none;
27 }
28 #keyboard_5xbogf8c_left{
29 position:absolute;
30 width:0.2em;
31 height:0.2em;
32 font-size:1em;
33 top:0em;
34 left:0em;
35 cursor:nw-resize;
36 }
37 #keyboard_5xbogf8c_right{
38 position:absolute;
39 width:0.2em;
40 height:0.2em;
41 font-size:1em;
42 top:0em;
43 right:0em;
44 cursor:ne-resize;
45 }
46
47 #keyboard_5xbogf8c ::after {
48 content: "";
49 display: table;
50 clear: both;
51 }
52
53 #keyboard_5xbogf8c li{
54 position:relative;
55 font-family: arial,"Vrinda";
56 width: 2.88em;
57 height: 2.8em;
58 line-height: 2.8em;
59 background-color: rgba(255,255,255,.8);
60 border-radius: 0.2em;
61 float: left;
62 text-align: center;
63 font-size:0.25em;
64 vertical-align: text-top;
65 margin-right: 0.4em;
66 margin-bottom: 0.4em;
67 box-shadow: 0 0.2em 0.4em rgba(0,0,0,.5);
68 cursor: pointer;
69 position: relative;
70 overflow:visible ;
71 }
72
73 #keyboard_5xbogf8c li:active {
74 box-shadow: inset 0 0.04em 0 rgba(0,0,0,.5);
75 top:0.08em;
76 }
77
78 #keyboard_5xbogf8c li:nth-child(11),#keyboard_5xbogf8c li:nth-child(43),#keyboard_5xbogf8c li:nth-child(22) {
79 background: rgba(188,188,188,.5);
80 font-size: 0.20em;
81 width: 5em;
82 height: 3.5em;
83 line-height:3.5em;
84 border-radius: 0.25em;
85 margin-right: 0.5em;
86 margin-bottom: 0.5em;
87 box-shadow: 0 0.25em 0.5em rgba(0,0,0,.5);
88 }
89 #keyboard_5xbogf8c li:nth-child(43) {
90 width: 3.6em;
91 }
92
93 #keyboard_5xbogf8c li:nth-child(12) {
94 margin-left: 0.96em;
95 }
96 #keyboard_5xbogf8c li:nth-child(23) {
97 margin-left: 1.92em;
98 }
99 #keyboard_5xbogf8c li:nth-child(22) {
100 width: 3.6em;
101 height: 4.2em;
102 background-color: rgba(238,238,238,1);
103 border-bottom-right-radius:0em;
104 border-bottom-left-radius:0em;
105 position:absolute;
106 top:4.5em;
107 right:0em;
108 box-shadow: inset 0 0em 0 rgba(0,0,0,.5);
109 }
110
111 #keyboard_5xbogf8c li:nth-child(32) {
112 width: 5.04em;
113 top:0;
114 background-color: rgba(238,238,238,1);
115 border-top-right-radius:0em;
116 padding-left:0.32em;
117 box-shadow: inset 0 0em 0 rgba(0,0,0,.5);
118
119 }
120
121 #keyboard_5xbogf8c li:nth-child(33){
122 font-size: 0.20em;
123 width: 5em;
124 height: 3.5em;
125 line-height:3.5em;
126 border-radius: 0.25em;
127 margin-right: 0.5em;
128 margin-bottom: 0.5em;
129 box-shadow: 0 0.25em 0.5em rgba(0,0,0,.5);
130 }
131
132 #keyboard_5xbogf8c li:nth-child(41) {
133 box-sizing: border-box;
134 padding-top: 0.6em;
135 }
136
137 #keyboard_5xbogf8c li:nth-child(41) span {
138 display: block;
139 line-height: 0.6;
140 }
141
142 #keyboard_5xbogf8c li:nth-child(42) {
143 box-sizing: border-box;
144 padding-top: 0.6em;
145 }
146
147 #keyboard_5xbogf8c li:nth-child(42) span {
148 display: block;
149 line-height: 0.6;
150 }
View Code
4.JS插件源码
1 /*
2 * ioskeyboard 1.0
3 * Copyright (c) 2014 BowenLuo http://www.luobo.com/
4 * Date: 2014-06-08
5 * Example:$(".numkeyboard").ioskeyboard({keyboardRadix:80,clickeve:true});
6 */
7 (function($){
8 $.fn.ioskeyboard = function(options){
9 var defaults = {
10 keyboardRadix:100,//键盘大小基数，实际大小比为9.4，即设置为100时实际大小为940X330
11 keyboardRadixMin:60,//键盘大小的最小值，默认为30，实际大小为564X198
12 keyboardRadixChange:true,//是否允许用户改变键盘大小,该功能仅能完美支持Chrome26；仅当keyboardRadixMin不小于60时，完美支持Safari内核浏览器
13 clickeve:true,//是否绑定元素click事件
14 colorchange:true,//是否开启按键记忆功能，如果开启，将随着按键次数的增加加深相应按键的背景颜色
15 colorchangeStep:1,//按键背景颜色改变步伐，采用RBG值，默认为RGB(255,255,255),没按一次三个数字都减去步伐值
16 colorchangeMin:154//按键背影颜色的最小值，默认为RGB(154,154,154)
17 }
18 var options = $.extend(defaults, options);
19 var numkeyboardcount = 0;
20 var activeinputele;
21 var keyboardRadix = options.keyboardRadix;
22 var keyboardRadixMin = options.keyboardRadixMin;
23 var colorchange = options.colorchange;
24 var colorchangeStep = options.colorchangeStep;
25 var colorchangeMin = options.colorchangeMin;
26 var bMouse = false;
27 var bToch = false;
28 var MAction = false;
29 var MTouch = false;
30 var keyfixed = false;
31 if(keyboardRadix<keyboardRadixMin){
32 keyboardRadix = keyboardRadixMin;
33 }
34 this.each(function(){
35 numkeyboardcount++;
36 //添加键盘
37 if(numkeyboardcount<2){
38 $("body").append("<ul id='keyboard_5xbogf8c'>"+
39 "<li>1</li>"+
40 "<li>2</li>"+
41 "<li>3</li>"+
42 "<li>4</li>"+
43 "<li>5</li>"+
44 "<li>6</li>"+
45 "<li>7</li>"+
46 "<li>8</li>"+
47 "<li>9</li>"+
48 "<li>0</li>"+
49 "<li>←</li>"+
50 "<li>Q</li>"+
51 "<li>W</li>"+
52 "<li>E</li>"+
53 "<li>R</li>"+
54 "<li>T</li>"+
55 "<li>Y</li>"+
56 "<li>U</li>"+
57 "<li>I</li>"+
58 "<li>O</li>"+
59 "<li>P</li>"+
60 "<li></li>"+
61 "<li>A</li>"+
62 "<li>S</li>"+
63 "<li>D</li>"+
64 "<li>F</li>"+
65 "<li>G</li>"+
66 "<li>H</li>"+
67 "<li>J</li>"+
68 "<li>K</li>"+
69 "<li>L</li>"+
70 "<li>Exit</li>"+
71 "<li>CapsLock</li>"+
72 "<li>Z</li>"+
73 "<li>X</li>"+
74 "<li>C</li>"+
75 "<li>V</li>"+
76 "<li>B</li>"+
77 "<li>N</li>"+
78 "<li>M</li>"+
79 "<li><span>-</span><span>_</span></li>"+
80 "<li><span>@</span><span>.</span></li>"+
81 "<li>Clear</li>"+
82 "<div id='keyboard_5xbogf8c_left'></div>"+
83 "<div id='keyboard_5xbogf8c_right'></div>"+
84 "</ul>");
85 }
86
87 var inputele = $(this);
88 var keyboard =$("#keyboard_5xbogf8c");
89 var keys = keyboard.children("li");
90 var hiddenbutton = keyboard.children("div");
91 keyboard.css({"font-size":keyboardRadix+"px"});
92
93 //keyboard.css({"position":"fixed","right":"0.05em","bottom":"0.05em"});
94 exit();
95 var shiftbool = false;
96 if(numkeyboardcount<2){
97 if(options.keyboardRadixChange){
98 BmouseDrag();
99 BtouchDrag();
100 }
101 keyboard.dblclick(function(){
102 if(keyfixed){
103 keyfixed = false;
104 }else{
105 keyboard.css({"position":"fixed","right":"0.05em","bottom":"0.05em"});
106 keyfixed = true;
107 }
108 });
109 keys.click(function(event){
110 var keyele = $(this);
111 var keytext = keyele.text();
112 var evebool = true;
113 if(keytext==="CapsLock"){
114 activeinputele[0].focus();
115 if(shiftbool){
116 keyele.css({background:"rgba(255,255,255,.9)"});
117 shiftbool = false;
118 }else{
119 keyele.css({background:"rgba(188,188,188,.5)"});
120 shiftbool = true;
121 }
122
123 evebool = false;
124 }
125 if(keytext==="Exit"||keytext.length<1){
126 simulateKeyEvent(activeinputele[0],13);
127 exit();
128 evebool = false;
129 }
130 if(keytext==="←"){
131 activeinputele[0].focus();
132 backspace();
133 evebool = false;
134 }
135 if(keytext==="Clear"){
136 activeinputele[0].focus();
137 keyclear();
138 evebool = false;
139 }
140 if(evebool){
141 if(shiftbool){
142 if(keytext.length===2){
143 keytext = keytext.substring(0,1);
144 }
145 }else{
146 if(keytext.length===2){
147 keytext = keytext.substring(1,2);
148 }else{
149 keytext = keytext.toLowerCase();
150 }
151
152 }
153 clickkey(keytext);
154 if(colorchange){
155 var oldbabkground = $(this).css("background").split(',')[0].split('(')[1];
156 var newbabkground = oldbabkground-colorchangeStep;
157 if(newbabkground<colorchangeMin){
158 newbabkground = colorchangeMin;
159 alert("min")
160 }
161 $(this).css("background","rgba("+newbabkground+","+newbabkground+","+newbabkground+",.9)");
162 }
163 }
164 })
165 keyboard.children("li:eq("+21+")").mousedown(function(event){
166 $(this).css({top:"4.6em", "box-shadow": "inset 0 0.04em 0 rgba(0,0,0,.5)"});
167 keyboard.children("li:eq("+31+")").css({top:"0.1em","box-shadow": "inset 0 0em 0 rgba(0,0,0,.5)"});
168 })
169 .mouseup(function(event){
170 $(this).css({top:"4.5em","box-shadow":" inset 0 0em 0 rgba(0,0,0,.5)"});
171 keyboard.children("li:eq("+31+")").css({top:"0px","box-shadow":" inset 0 0em 0 rgba(0,0,0,.5)"});
172 });
173 keyboard.children("li:eq("+31+")").mousedown(function(event){
174 $(this).css({top:"0.1em","box-shadow": "inset 0 0em 0 rgba(0,0,0,.5)"});
175 keyboard.children("li:eq("+21+")").css({top:"4.6em", "box-shadow": "inset 0 0.04em 0 rgba(0,0,0,.5)"});
176 })
177 .mouseup(function(event){
178 $(this).css({top:"0px","box-shadow":" inset 0 0em 0 rgba(0,0,0,.5)"});
179 keyboard.children("li:eq("+21+")").css({top:"4.5em","box-shadow":" inset 0 0em 0 rgba(0,0,0,.5)"});
180 });
181 }
182
183 inputele.focus(function(event){
184 activeinputele = inputele;
185 var p = GetScreenPosition(this);
186 if(keyboard.css("display")=="none"){
187 keyboard.css({"display":"block"});
188 mouseDrag();
189 touchDrag();
190 }});
191
192 if(options.clickeve){
193 inputele.click(function(){
194 activeinputele = inputele;
195 var p = GetScreenPosition(this);
196 if(keyboard.css("display")=="none"){
197 keyboard.css({"display":"block"});
198 mouseDrag();
199 touchDrag();
200 }});
201 }
202
203 function GetScreenPosition(object) {
204 var position = {};
205 position.x = object.offsetLeft;
206 position.y = object.offsetTop;
207 while (object.offsetParent) {
208 position.x = position.x + object.offsetParent.offsetLeft;
209 position.y = position.y + object.offsetParent.offsetTop;
210 if (object == document.getElementsByTagName("body")[0]) {
211 break;
212 }
213 else{
214 object = object.offsetParent;
215 }
216 }
217 return position;
218 }
219
220 function keyclear(){
221 activeinputele.val("");
222 }
223 function backspace(){
224 var gbc = GetCursorPsn(activeinputele[0]);
225 var inputtext = activeinputele.val();
226 if(inputtext.length>0){
227 var leftstr = inputtext.substring(0,gbc);
228 var rightstr = inputtext.substring(gbc,inputtext.length);
229
230 leftstr = leftstr.substring(0,leftstr.length-1);
231 activeinputele.val(leftstr+rightstr);
232 setCaretPosition(activeinputele[0],gbc-1);
233 }
234 }
235 function clickkey(key){
236 var gbc = GetCursorPsn(activeinputele[0]);
237 var inputtext = activeinputele.val();
238 inputtext = strcha(inputtext,key,gbc);
239 activeinputele.val(inputtext);
240 setCaretPosition(activeinputele[0],gbc+1);
241 }
242
243 function exit(){
244 keyboard.css({"display":"none"});
245 }
246
247 function strcha(oldstr,ch,index){
248 var oldstrlength = oldstr.length;
249 if(oldstrlength-1<index){
250 return oldstr+ch;
251 }else{
252 var leftstr = oldstr.substring(0,index);
253 var rightstr = oldstr.substring(index,oldstrlength);
254 return leftstr+ch+rightstr;
255 }
256 }
257
258 function GetCursorPsn(txb) //获取输入框光标位置
259 {
260 var psn = 0;
261 if(txb.selectionStart) //FF
262 psn = txb.selectionStart;
263 else if(txb.selection){
264 var slct = document.selection; //IE
265 var rng = slct.createRange();
266 txb.select();
267 rng.setEndPoint("StartToStart", slct.createRange());
268 psn = rng.text.length;
269 rng.collapse(false);
270 rng.select();
271 }
272 return psn;
273 }
274
275 function setCaretPosition(elm, n) {
276 if(n > elm.value.length)
277 n = elm.value.length;
278 if(elm.createTextRange) { // IE
279 var textRange = elm.createTextRange();
280 textRange.moveStart('character', n);
281 textRange.collapse();
282 textRange.select();
283 } else if(elm.setSelectionRange) { // Firefox
284 elm.setSelectionRange(n, n);
285 elm.focus();
286 }
287 }
288
289
290 function BmouseDrag(){
291 var eventEle = hiddenbutton;
292 var eventEleId;
293 var moveEle = keyboard;
294 var stx = etx = curX = 0;
295 var keyboardfontsize = +moveEle.css("font-size").split('px')[0];
296 var tempsize;
297 eventEle.mousedown(function(event){
298 bMouse = true;
299 stx = event.pageX;
300 keyboardfontsize = +moveEle.css("font-size").split('px')[0];
301 eventEleId = $(this).attr('id');
302 event.preventDefault();
303 });
304 $("body").mousemove(function(event){
305 if(bMouse){
306 var curX = event.pageX-stx;
307 if(eventEleId==="keyboard_5xbogf8c_left"){
308 tempsize = keyboardfontsize-Math.ceil(curX/10);
309 }
310 if(eventEleId==="keyboard_5xbogf8c_right"){
311 tempsize = keyboardfontsize+Math.ceil(curX/10);
312 }
313 if(tempsize<keyboardRadixMin){
314 tempsize=keyboardRadixMin;
315 }
316 moveEle.css({"font-size":tempsize});
317 event.preventDefault();
318 }});
319 $("body").mouseup(function(event){
320 stx = etx = curX = 0;
321 bMouse = false;
322 });
323 }
324
325 function BtouchDrag() {
326 var eventEle = hiddenbutton;
327 var moveEle = keyboard;
328 var eventEleId;
329 var stx = etx = curX = 0;
330 var keyboardfontsize = +moveEle.css("font-size").split('px')[0];
331 var tempsize;
332 eventEle.on("touchstart", function(event) { //touchstart
333 var event = event.originalEvent;
334 bToch = true;
335 curX = 0;
336 eventEleId = $(this).attr('id');
337 keyboardfontsize = +moveEle.css("font-size").split('px')[0];
338 stx = event.touches[0].pageX;
339 sty = event.touches[0].pageY;
340 });
341 eventEle.on("touchmove", function(event) {
342 if(bToch){
343 var event = event.originalEvent;
344
345 curX = event.touches[0].pageX - stx;
346 if(eventEleId==="keyboard_5xbogf8c_left"){
347 tempsize = keyboardfontsize-Math.ceil(curX/10);
348 }
349 if(eventEleId==="keyboard_5xbogf8c_right"){
350 tempsize = keyboardfontsize+Math.ceil(curX/10);
351 }
352 if(tempsize<keyboardRadixMin){
353 tempsize=keyboardRadixMin;
354 }
355 moveEle.css({"font-size":tempsize});
356 event.preventDefault();
357 }
358
359 });
360 eventEle.on("touchend", function(event) {
361 stx = etx = curX = 0;
362 bToch = false;
363
364 })
365
366 }
367
368 function mouseDrag() {
369 var eventEle = keyboard;
370 var stx = etx = curX = sty = ety = curY = 0;
371 var eleRight =+eventEle.css("right").split('px')[0];
372 var eleBottom = +eventEle.css("bottom").split('px')[0];
373 eventEle.mousedown(function(event){
374 //console.log("down",+eventEle.css("right").split('px')[0]);
375 if(!keyfixed){
376 MAction = true;
377 }
378 //alert(MAction);
379 stx = event.pageX;
380 sty = event.pageY;
381 //eleRight = +eventEle.css("left").split('px')[0];
382 //eleBottom = +eventEle.css("top").split('px')[0];
383 eleRight = +eventEle.css("right").split('px')[0];
384 eleBottom = +eventEle.css("bottom").split('px')[0];
385
386 event.preventDefault();
387 });
388 $("body").mousemove(function(event){
389 if(MAction&&!bMouse){
390 var curX = event.pageX-stx;
391 var curY = event.pageY-sty;
392 eventEle.css({"right":eleRight-curX,"bottom":eleBottom-curY});
393 //console.log("move",+eventEle.css("right").split('px')[0]);
394 event.preventDefault();
395 }});
396 $("body").mouseup(function(event){
397 stx = etx = curX = sty = ety = curY = 0;
398 MAction = false;
399 //console.log("up",+eventEle.css("right").split('px')[0]);
400
401 });
402 }
403
404 function touchDrag() {
405 var eventEle = keyboard;
406 var stx = sty = etx = ety = curX = curY = 0;
407 var MTouch = false;
408 var eleRight = +eventEle.css("right").split('px')[0];
409 var eleBottom = +eventEle.css("bottom").split('px')[0];
410 eventEle.on("touchstart", function(event) { //touchstart
411 // alert(bToch);
412 var event = event.originalEvent;
413 MTouch = true;
414 curX = curY = 0;
415 // 元素当前位置
416 eleRight = +eventEle.css("right").split('px')[0];
417 eleBottom = +eventEle.css("bottom").split('px')[0];
418 // 手指位置
419 stx = event.touches[0].pageX;
420 sty = event.touches[0].pageY;
421 //console.log("up",+eventEle.css("right").split('px')[0]);
422 });
423 eventEle.on("touchmove", function(event) {
424
425 if(MTouch&&!bToch){
426
427 var event = event.originalEvent;
428 event.preventDefault();
429 curX = event.touches[0].pageX - stx;
430 curY = event.touches[0].pageY - sty;
431 //console.log("move",eleRight-curX);
432 //alert(eleRight+"-"+gundongX);
433 eventEle.css({"right":eleRight-curX,"bottom":eleBottom-curY});
434 }
435
436 });
437 eventEle.on("touchend", function(event) {
438 stx = etx = curX = sty = ety = curY = 0;
439 MTouch = false;
440
441 })
442
443 }
444
445 //模拟键盘事件,仅支持firefox，ie8-
446
447 function simulateKeyEvent(target,keyCode)
448 {
449 var customEvent = null;
450 var a = typeof document.createEvent;
451
452 if(typeof document.createEvent == "function"){//firefox
453 try {
454 customEvent = document.createEvent("KeyEvents");
455 customEvent.initKeyEvent("keypress", true, true,window, false, false, false, false, keyCode, keyCode);
456 target.dispatchEvent(customEvent);
457 } catch (ex){
458 //console.log("This example is only demonstrating event simulation in firefox and IE.");
459 }
460
461
462 } else if (document.createEventObject){ //IE
463 customEvent = document.createEventObject();
464 customEvent.bubbles = true;
465 customEvent.cancelable = true;
466 customEvent.view = window;
467 customEvent.ctrlKey = false;
468 customEvent.altKey = false;
469 customEvent.shiftKey = false;
470 customEvent.metaKey = false;
471 customEvent.keyCode = keyCode;
472 target.fireEvent("onkeypress", customEvent);
473
474 }
475 else {
476 //console.log("This example is only demonstrating event simulation in firefox and IE.");
477 }
478 }
479
480 });
481 };
482 })(jQuery);
二.实现探讨
1.元素布局和样式
布局没啥好说的，一个按键一个li元素或div等元素(仿回车键我用了俩个li，如果大小不是确定的，这样可能会出现一些问题，所以没有必要还是不要用)，浮动float:left，再用一个父元素包裹起来。
css上主要用box-shadow结合active来实现按键动作的视觉效果，比较少用的可能是user-select: none消除元素的选中效果(默认为蓝色遮罩)，还有特别漂亮的渐变背景效果linear-gradient。特别要讲到的是除了父元素的font-size外全部采用em作为单位，这也是做的好处就是只有改变父元素的font-size就可以比例改变所有元素的大小，缺点就是部分浏览器(如chrome)支持的font-size的最小值为12px，所以缩放有一定的限制，需要根据最底层的font-size值来设置最小值。解决方案就是把所有文字全部单独包裹放在每个层的最底层，把字体大小和元素大小独立起来。
2.js实现
a.如果要用js插入键盘html代码，必须确保一个页面只插入一次。
b.键盘的拖动：监听键盘元素上的mousedown事件，当鼠标在键盘上按下时记录鼠标的位置，当鼠标移动时根据鼠标当前的位置与鼠标按下是的位置差来确定移动的距离，同步改变键盘元素的位置。触屏拖动与此类似。
c.改变键盘大小：上面讲到过，要比例改变键盘大小，只要改变键盘元素的font-size值即可。所以只需要添加事件来触发就行了，这里是添在键盘的左右上角分别添加了一个透明元素，当在触发此元素上的mousedown事件时根据鼠标拖动的水平距离来比例改变font-size值。
d.按键事件：监听每个按键元素的click事件。根据按键的text来确定按下的是哪个键(也可以用index()来判断)，然后做出相应的动作。例如在输入框中写入按键值，大小写切换，退格，清除，关闭键盘等。
e.键盘按键记忆功能：纯属无聊才加了这个功能，大家不必在意。实现的方法就是每按一个键，就把这个按键的背景元素rgb全部减去一个常量，直到设定的最小值。所以效果只是简单的白-灰-黑。如果把rgb分开改变的话，效果会更丰富。
f.事件键盘模拟事件：模拟实际键盘按下确认键后自动提交的功能，按下Exit后自动提交。由于浏览器的限制，该功能目前只在firefox中测试通过，据说ie8及以下的浏览器都可以，不过没有太大的意义。
必较重要的是键盘的每个事件在一个页面内最好是确保只会监听一次，因为事件监听几次触发的时候就会执行几次，如果这样的话，就可能达不到预计效果。例如如果键盘按键的click事件，如果监听多次的话，每一次按键都会在输入框中输入几个键值。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
