前些天写了一个基于基于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 }
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,//键盘大小的最小值，默认为60，实际大小为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 inputtext = activeinputele.val(); 225 if(inputtext.length>0){ 226 inputtext = inputtext.substring(0,inputtext.length-1); 227 activeinputele.val(inputtext); 228 } 229 } 230 function clickkey(key){ 231 var inputtext = activeinputele.val(); 232 inputtext = inputtext+key; 233 activeinputele.val(inputtext); 234 activeinputele[0].focus(); 235 } 236 237 function exit(){ 238 keyboard.css({"display":"none"}); 239 } 240 241 242 function BmouseDrag(){ 243 var eventEle = hiddenbutton; 244 var eventEleId; 245 var moveEle = keyboard; 246 var stx = etx = curX = 0; 247 var keyboardfontsize = +moveEle.css("font-size").split(‘px‘)[0]; 248 var tempsize; 249 eventEle.mousedown(function(event){ 250 bMouse = true; 251 stx = event.pageX; 252 keyboardfontsize = +moveEle.css("font-size").split(‘px‘)[0]; 253 eventEleId = $(this).attr(‘id‘); 254 event.preventDefault(); 255 }); 256 $("body").mousemove(function(event){ 257 if(bMouse){ 258 var curX = event.pageX-stx; 259 if(eventEleId==="keyboard_5xbogf8c_left"){ 260 tempsize = keyboardfontsize-Math.ceil(curX/10); 261 } 262 if(eventEleId==="keyboard_5xbogf8c_right"){ 263 tempsize = keyboardfontsize+Math.ceil(curX/10); 264 } 265 if(tempsize<keyboardRadixMin){ 266 tempsize=keyboardRadixMin; 267 } 268 moveEle.css({"font-size":tempsize}); 269 event.preventDefault(); 270 }}); 271 $("body").mouseup(function(event){ 272 stx = etx = curX = 0; 273 bMouse = false; 274 }); 275 } 276 277 function BtouchDrag() { 278 var eventEle = hiddenbutton; 279 var moveEle = keyboard; 280 var eventEleId; 281 var stx = etx = curX = 0; 282 var keyboardfontsize = +moveEle.css("font-size").split(‘px‘)[0]; 283 var tempsize; 284 eventEle.on("touchstart", function(event) { //touchstart 285 var event = event.originalEvent; 286 bToch = true; 287 curX = 0; 288 eventEleId = $(this).attr(‘id‘); 289 keyboardfontsize = +moveEle.css("font-size").split(‘px‘)[0]; 290 stx = event.touches[0].pageX; 291 sty = event.touches[0].pageY; 292 }); 293 eventEle.on("touchmove", function(event) { 294 if(bToch){ 295 var event = event.originalEvent; 296 297 curX = event.touches[0].pageX - stx; 298 if(eventEleId==="keyboard_5xbogf8c_left"){ 299 tempsize = keyboardfontsize-Math.ceil(curX/10); 300 } 301 if(eventEleId==="keyboard_5xbogf8c_right"){ 302 tempsize = keyboardfontsize+Math.ceil(curX/10); 303 } 304 if(tempsize<keyboardRadixMin){ 305 tempsize=keyboardRadixMin; 306 } 307 moveEle.css({"font-size":tempsize}); 308 event.preventDefault(); 309 } 310 311 }); 312 eventEle.on("touchend", function(event) { 313 stx = etx = curX = 0; 314 bToch = false; 315 316 }) 317 318 } 319 320 function mouseDrag() { 321 var eventEle = keyboard; 322 var stx = etx = curX = sty = ety = curY = 0; 323 var eleRight =+eventEle.css("right").split(‘px‘)[0]; 324 var eleBottom = +eventEle.css("bottom").split(‘px‘)[0]; 325 eventEle.mousedown(function(event){ 326 //console.log("down",+eventEle.css("right").split(‘px‘)[0]); 327 if(!keyfixed){ 328 MAction = true; 329 } 330 //alert(MAction); 331 stx = event.pageX; 332 sty = event.pageY; 333 //eleRight = +eventEle.css("left").split(‘px‘)[0]; 334 //eleBottom = +eventEle.css("top").split(‘px‘)[0]; 335 eleRight = +eventEle.css("right").split(‘px‘)[0]; 336 eleBottom = +eventEle.css("bottom").split(‘px‘)[0]; 337 338 event.preventDefault(); 339 }); 340 $("body").mousemove(function(event){ 341 if(MAction&&!bMouse){ 342 var curX = event.pageX-stx; 343 var curY = event.pageY-sty; 344 eventEle.css({"right":eleRight-curX,"bottom":eleBottom-curY}); 345 //console.log("move",+eventEle.css("right").split(‘px‘)[0]); 346 event.preventDefault(); 347 }}); 348 $("body").mouseup(function(event){ 349 stx = etx = curX = sty = ety = curY = 0; 350 MAction = false; 351 //console.log("up",+eventEle.css("right").split(‘px‘)[0]); 352 353 }); 354 } 355 356 function touchDrag() { 357 var eventEle = keyboard; 358 var stx = sty = etx = ety = curX = curY = 0; 359 var MTouch = false; 360 var eleRight = +eventEle.css("right").split(‘px‘)[0]; 361 var eleBottom = +eventEle.css("bottom").split(‘px‘)[0]; 362 eventEle.on("touchstart", function(event) { //touchstart 363 // alert(bToch); 364 var event = event.originalEvent; 365 MTouch = true; 366 curX = curY = 0; 367 // 元素当前位置 368 eleRight = +eventEle.css("right").split(‘px‘)[0]; 369 eleBottom = +eventEle.css("bottom").split(‘px‘)[0]; 370 // 手指位置 371 stx = event.touches[0].pageX; 372 sty = event.touches[0].pageY; 373 //console.log("up",+eventEle.css("right").split(‘px‘)[0]); 374 }); 375 eventEle.on("touchmove", function(event) { 376 377 if(MTouch&&!bToch){ 378 379 var event = event.originalEvent; 380 event.preventDefault(); 381 curX = event.touches[0].pageX - stx; 382 curY = event.touches[0].pageY - sty; 383 //console.log("move",eleRight-curX); 384 //alert(eleRight+"-"+gundongX); 385 eventEle.css({"right":eleRight-curX,"bottom":eleBottom-curY}); 386 } 387 388 }); 389 eventEle.on("touchend", function(event) { 390 stx = etx = curX = sty = ety = curY = 0; 391 MTouch = false; 392 393 }) 394 395 } 396 397 //模拟键盘事件,仅支持firefox，ie8- 398 399 function simulateKeyEvent(target,keyCode) 400 { 401 var customEvent = null; 402 var a = typeof document.createEvent; 403 404 if(typeof document.createEvent == "function"){//firefox 405 try { 406 customEvent = document.createEvent("KeyEvents"); 407 customEvent.initKeyEvent("keypress", true, true,window, false, false, false, false, keyCode, keyCode); 408 target.dispatchEvent(customEvent); 409 } catch (ex){ 410 //console.log("This example is only demonstrating event simulation in firefox and IE."); 411 } 412 413 414 } else if (document.createEventObject){ //IE 415 customEvent = document.createEventObject(); 416 customEvent.bubbles = true; 417 customEvent.cancelable = true; 418 customEvent.view = window; 419 customEvent.ctrlKey = false; 420 customEvent.altKey = false; 421 customEvent.shiftKey = false; 422 customEvent.metaKey = false; 423 customEvent.keyCode = keyCode; 424 target.fireEvent("onkeypress", customEvent); 425 426 } 427 else { 428 //console.log("This example is only demonstrating event simulation in firefox and IE."); 429 } 430 } 431 432 }); 433 }; 434 })(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事件，如果监听多次的话，每一次按键都会在输入框中输入几个键值。