基於jQuery的軟鍵盤

　　前些天寫了一個基於基於jQuery的數字鍵盤，今天給大家帶來一個基於jQuery的全字母鍵盤插件(支持全字母大小寫切換，數字輸入，退格清除，關閉功能，可調整大小和鍵盤位置(可設置固定在屏幕右下角)，支持鼠標和觸屏拖動，並且特意保留了四個常用字符"_","-",".","/"。還有按鍵記憶功能哦，可自動改變使用頻繁按鍵的背景顏色。)。

　　在線演示

　　效果截圖:

　　

　　頁面效果參照PolarBear的使用CSS3制作的蘋果風格鍵盤 修改而成，在這里感謝PolarBear的無私分享。

一.代碼分享

　　1.Demo頁面代碼

<ul>
    <li><input type="text" placeholder="手機號碼后四位" id="numkeyboard1" class="numkeyboard" /></li>
    <li><input type="text"  placeholder="開箱密碼"  id="numkeyboard2"  class="numkeyboard"/></li>
    <button type="submit"value="querun">確  認</button>        
</ul>

　　鍵盤頁面代碼(插件中頁面鍵盤的頁面代碼由js插入)

<ul id='keyboard_5xbogf8c'> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li>4</li> 
     <li>5</li> 
     <li>6</li> 
     <li>7</li> 
     <li>8</li> 
     <li>9</li> 
     <li>0</li> 
     <li>←</li> 
     <li>Q</li> 
     <li>W</li> 
     <li>E</li> 
     <li>R</li> 
     <li>T</li> 
     <li>Y</li> 
     <li>U</li> 
     <li>I</li> 
     <li>O</li> 
     <li>P</li> 
     <li></li> 
     <li>A</li> 
     <li>S</li> 
     <li>D</li> 
     <li>F</li> 
     <li>G</li> 
     <li>H</li> 
     <li>J</li> 
     <li>K</li> 
     <li>L</li> 
     <li>Clear</li> 
     <li>CapsLock</li> 
     <li>Z</li> 
     <li>X</li> 
     <li>C</li> 
     <li>V</li> 
     <li>B</li> 
     <li>N</li> 
     <li>M</li> 
     <li><span>-</span><span>_</span></li> 
     <li><span>/</span><span>.</span></li> 
     <li>Exit</li>     
    <div id="keyboard_5xbogf8c_left"></div>
    <div id="keyboard_5xbogf8c_right"></div>
   </ul>   

　　2.調用

$(".numkeyboard").ioskeyboard({
    keyboardRadix:80,//鍵盤大小基數，實際大小比為9.4，即設置為100時實際大小為940X330
    keyboardRadixMin:40,//鍵盤大小的最小值，默認為60，實際大小為564X198
    keyboardRadixChange:true,//是否允許用戶改變鍵盤大小,該功能僅能完美支持Chrome26；僅當keyboardRadixMin不小於60時才較好支持Safari內核瀏覽器
    clickeve:true,//是否綁定元素click事件
    colorchange:true,//是否開啟按鍵記憶功能，如果開啟，將隨着按鍵次數的增加加深相應按鍵的背景顏色
    colorchangeStep:1,//按鍵背景顏色改變步伐，采用RBG值，默認為RGB(255,255,255),沒按一次三個數字都減去步伐值
    colorchangeMin:154//按鍵背影顏色的最小值，默認為RGB(154,154,154)
});

　　3.CSS代碼

#keyboard_5xbogf8c ,#keyboard_5xbogf8c li  {
  list-style: none;
  margin: 0;
  padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

#keyboard_5xbogf8c{
    position:fixed;
    z-index:10;
    width: 9.30em;
     background: rgba(158,180,185,1);
    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)));
    background: linear-gradient(60deg, rgba(158,180,185,1), rgba(222,157,193,1) 50%, rgba(169,156,173,1) 100%);
    padding-left: 0.1em;
    border-radius: 0.05em;
    padding-top: 0.1em;
    box-shadow: 0 0.05em 0.1em rgba(0,0,0,.5);
    display:none;
    font-size:100px;
    right:0.05em;
    bottom:0.05em;
    -webkit-text-size-adjust:none;
}
#keyboard_5xbogf8c_left{
    position:absolute;    
    width:0.2em;
    height:0.2em;
    font-size:1em;    
    top:0em;
    left:0em;
    cursor:nw-resize;
}
#keyboard_5xbogf8c_right{
    position:absolute;    
    width:0.2em;
    height:0.2em;
    font-size:1em;    
    top:0em;
    right:0em;
    cursor:ne-resize;
}

#keyboard_5xbogf8c ::after {
    content: "";
    display: table;
    clear: both;
}

#keyboard_5xbogf8c li{    
  position:relative;
  font-family: arial,"Vrinda";
  width: 2.88em;
  height: 2.8em;
  line-height: 2.8em;
  background-color: rgba(255,255,255,.8);
  border-radius: 0.2em;
  float: left;
  text-align: center;
  font-size:0.25em;
  vertical-align: text-top;
  margin-right: 0.4em;
  margin-bottom: 0.4em;
  box-shadow: 0 0.2em 0.4em rgba(0,0,0,.5);
  cursor: pointer;
  position: relative;
  overflow:visible ;
}

#keyboard_5xbogf8c li:active {
    box-shadow: inset 0 0.04em 0 rgba(0,0,0,.5);
    top:0.08em;
}

#keyboard_5xbogf8c li:nth-child(11),#keyboard_5xbogf8c li:nth-child(43),#keyboard_5xbogf8c li:nth-child(22)  {
    background: rgba(188,188,188,.5);
    font-size: 0.20em;
    width: 5em;
    height: 3.5em;
    line-height:3.5em;
    border-radius: 0.25em;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    box-shadow: 0 0.25em 0.5em rgba(0,0,0,.5);
}
#keyboard_5xbogf8c li:nth-child(43)  {  
    width: 3.6em;
}

#keyboard_5xbogf8c li:nth-child(12) {
    margin-left: 0.96em;
}
#keyboard_5xbogf8c li:nth-child(23)  {
   margin-left: 1.92em;
}
#keyboard_5xbogf8c li:nth-child(22)  {
    width: 3.6em;
    height: 4.2em;
    background-color: rgba(238,238,238,1);
    border-bottom-right-radius:0em;
    border-bottom-left-radius:0em;
    position:absolute;
    top:4.5em;
    right:0em;
    box-shadow: inset 0 0em 0 rgba(0,0,0,.5);
}

#keyboard_5xbogf8c li:nth-child(32)  {
   width: 5.04em;
   top:0;
   background-color: rgba(238,238,238,1);
   border-top-right-radius:0em;
   padding-left:0.32em;
   box-shadow: inset 0 0em 0 rgba(0,0,0,.5);
   
}

#keyboard_5xbogf8c li:nth-child(33){
    font-size: 0.20em;
    width: 5em;
    height: 3.5em;
    line-height:3.5em;
    border-radius: 0.25em;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    box-shadow: 0 0.25em 0.5em rgba(0,0,0,.5);
}

#keyboard_5xbogf8c li:nth-child(41) {
  box-sizing: border-box;
  padding-top: 0.6em;
}

#keyboard_5xbogf8c li:nth-child(41) span {
  display: block;
  line-height: 0.6;
}

#keyboard_5xbogf8c li:nth-child(42) {
  box-sizing: border-box;
  padding-top: 0.6em;
}

#keyboard_5xbogf8c li:nth-child(42) span {
  display: block;
  line-height: 0.6;
}

　　

　　4.JS插件源碼

 

/* 
* ioskeyboard 1.0 
* Copyright (c) 2014 BowenLuo http://www.luobo.com/ 
* Date: 2014-06-08
* Example:$(".numkeyboard").ioskeyboard({keyboardRadix:80,clickeve:true});
*/ 
(function($){ 
$.fn.ioskeyboard = function(options){ 
var defaults = { 
    keyboardRadix:100,//鍵盤大小基數，實際大小比為9.4，即設置為100時實際大小為940X330
    keyboardRadixMin:60,//鍵盤大小的最小值，默認為30，實際大小為564X198
    keyboardRadixChange:true,//是否允許用戶改變鍵盤大小,該功能僅能完美支持Chrome26；僅當keyboardRadixMin不小於60時，完美支持Safari內核瀏覽器
    clickeve:true,//是否綁定元素click事件
    colorchange:true,//是否開啟按鍵記憶功能，如果開啟，將隨着按鍵次數的增加加深相應按鍵的背景顏色
    colorchangeStep:1,//按鍵背景顏色改變步伐，采用RBG值，默認為RGB(255,255,255),沒按一次三個數字都減去步伐值
    colorchangeMin:154//按鍵背影顏色的最小值，默認為RGB(154,154,154)
} 
var options = $.extend(defaults, options); 
var numkeyboardcount = 0;
var activeinputele;
var keyboardRadix = options.keyboardRadix;
var keyboardRadixMin = options.keyboardRadixMin;
var colorchange = options.colorchange;
var colorchangeStep = options.colorchangeStep;
var colorchangeMin = options.colorchangeMin;
var bMouse = false;
var bToch = false;
var MAction = false;
var MTouch = false;
var keyfixed = false;
if(keyboardRadix<keyboardRadixMin){
    keyboardRadix = keyboardRadixMin;
}
this.each(function(){ 
    numkeyboardcount++;
    //添加鍵盤
    if(numkeyboardcount<2){
    $("body").append("<ul id='keyboard_5xbogf8c'>"+
    "<li>1</li>"+
    "<li>2</li>"+
    "<li>3</li>"+
    "<li>4</li>"+
    "<li>5</li>"+
    "<li>6</li>"+
    "<li>7</li>"+
    "<li>8</li>"+
    "<li>9</li>"+
    "<li>0</li>"+
    "<li>←</li>"+
    "<li>Q</li>"+
    "<li>W</li>"+
    "<li>E</li>"+
    "<li>R</li>"+
    "<li>T</li>"+
    "<li>Y</li>"+
    "<li>U</li>"+
    "<li>I</li>"+
    "<li>O</li>"+
    "<li>P</li>"+
    "<li></li>"+
    "<li>A</li>"+
    "<li>S</li>"+
    "<li>D</li>"+
    "<li>F</li>"+
    "<li>G</li>"+
    "<li>H</li>"+
    "<li>J</li>"+
    "<li>K</li>"+
    "<li>L</li>"+
    "<li>Exit</li>"+
    "<li>CapsLock</li>"+
    "<li>Z</li>"+
    "<li>X</li>"+
    "<li>C</li>"+
    "<li>V</li>"+
    "<li>B</li>"+
    "<li>N</li>"+
    "<li>M</li>"+
    "<li><span>-</span><span>_</span></li>"+
    "<li><span>@</span><span>.</span></li>"+
    "<li>Clear</li>"+
    "<div id='keyboard_5xbogf8c_left'></div>"+
    "<div id='keyboard_5xbogf8c_right'></div>"+
  "</ul>");    
    }    
    
    var inputele = $(this);
    var keyboard =$("#keyboard_5xbogf8c");
    var keys = keyboard.children("li");
    var hiddenbutton = keyboard.children("div");
    keyboard.css({"font-size":keyboardRadix+"px"});
    
    //keyboard.css({"position":"fixed","right":"0.05em","bottom":"0.05em"});
    exit();
    var shiftbool = false;
    if(numkeyboardcount<2){
    if(options.keyboardRadixChange){
        BmouseDrag();
        BtouchDrag();
    }
    keyboard.dblclick(function(){
        if(keyfixed){
            keyfixed = false;
        }else{
            keyboard.css({"position":"fixed","right":"0.05em","bottom":"0.05em"});
            keyfixed = true;
        }
    });
    keys.click(function(event){
    var keyele = $(this);
    var keytext = keyele.text();
    var evebool = true;    
    if(keytext==="CapsLock"){
        activeinputele[0].focus();
        if(shiftbool){
            keyele.css({background:"rgba(255,255,255,.9)"});
            shiftbool = false;
        }else{
            keyele.css({background:"rgba(188,188,188,.5)"});
            shiftbool = true;
        }
        
        evebool = false;
    }
    if(keytext==="Exit"||keytext.length<1){
        simulateKeyEvent(activeinputele[0],13);
        exit();
        evebool = false;
    }
    if(keytext==="←"){
        activeinputele[0].focus();
        backspace();
        evebool = false;
    }
    if(keytext==="Clear"){
        activeinputele[0].focus();
        keyclear();
        evebool = false;
    }
    if(evebool){
        if(shiftbool){
            if(keytext.length===2){
                keytext = keytext.substring(0,1);
            }
        }else{
            if(keytext.length===2){    
                keytext = keytext.substring(1,2);
            }else{
                keytext = keytext.toLowerCase();    
            }
                    
        }
        clickkey(keytext);
        if(colorchange){
            var oldbabkground = $(this).css("background").split(',')[0].split('(')[1];
            var newbabkground = oldbabkground-colorchangeStep;
            if(newbabkground<colorchangeMin){
                newbabkground = colorchangeMin;
                alert("min")
            }
             $(this).css("background","rgba("+newbabkground+","+newbabkground+","+newbabkground+",.9)");
        }
    }    
    })
    keyboard.children("li:eq("+21+")").mousedown(function(event){
        $(this).css({top:"4.6em", "box-shadow": "inset 0 0.04em 0 rgba(0,0,0,.5)"});
        keyboard.children("li:eq("+31+")").css({top:"0.1em","box-shadow": "inset 0 0em 0 rgba(0,0,0,.5)"});
    })
    .mouseup(function(event){
        $(this).css({top:"4.5em","box-shadow":" inset 0 0em 0 rgba(0,0,0,.5)"});
        keyboard.children("li:eq("+31+")").css({top:"0px","box-shadow":" inset 0 0em 0 rgba(0,0,0,.5)"});
    });
    keyboard.children("li:eq("+31+")").mousedown(function(event){
        $(this).css({top:"0.1em","box-shadow": "inset 0 0em 0 rgba(0,0,0,.5)"});
        keyboard.children("li:eq("+21+")").css({top:"4.6em", "box-shadow": "inset 0 0.04em 0 rgba(0,0,0,.5)"});
    })
    .mouseup(function(event){
        $(this).css({top:"0px","box-shadow":" inset 0 0em 0 rgba(0,0,0,.5)"});
        keyboard.children("li:eq("+21+")").css({top:"4.5em","box-shadow":" inset 0 0em 0 rgba(0,0,0,.5)"});
    });
    }

    inputele.focus(function(event){    
        activeinputele = inputele;
        var p = GetScreenPosition(this);
        if(keyboard.css("display")=="none"){
            keyboard.css({"display":"block"});
            mouseDrag();
            touchDrag();        
        }});
        
    if(options.clickeve){        
        inputele.click(function(){    
        activeinputele = inputele;
        var p = GetScreenPosition(this);
        if(keyboard.css("display")=="none"){        
            keyboard.css({"display":"block"});
            mouseDrag();
            touchDrag();
        }});
    }
    
    function GetScreenPosition(object) {
        var position = {};            
        position.x = object.offsetLeft;
        position.y = object.offsetTop;
        while (object.offsetParent) {
            position.x = position.x + object.offsetParent.offsetLeft;
            position.y = position.y + object.offsetParent.offsetTop;
            if (object == document.getElementsByTagName("body")[0]) {
                break;
            }
            else{
                object = object.offsetParent;
            }
        }
        return position;
    }    
        
    function keyclear(){
         activeinputele.val("");
    }
    function backspace(){
        var gbc = GetCursorPsn(activeinputele[0]);
        var inputtext = activeinputele.val();
        if(inputtext.length>0){
            var leftstr = inputtext.substring(0,gbc);
            var rightstr = inputtext.substring(gbc,inputtext.length);
            
            leftstr = leftstr.substring(0,leftstr.length-1);
            activeinputele.val(leftstr+rightstr);
            setCaretPosition(activeinputele[0],gbc-1);
        }    
    }    
    function clickkey(key){
        var gbc = GetCursorPsn(activeinputele[0]);
        var inputtext = activeinputele.val();
        inputtext = strcha(inputtext,key,gbc);
        activeinputele.val(inputtext);
        setCaretPosition(activeinputele[0],gbc+1);
    }    
    
    function exit(){    
        keyboard.css({"display":"none"});
    }
    
    function strcha(oldstr,ch,index){
        var oldstrlength = oldstr.length;
        if(oldstrlength-1<index){
            return oldstr+ch;
        }else{
            var leftstr = oldstr.substring(0,index);
            var rightstr = oldstr.substring(index,oldstrlength);
            return leftstr+ch+rightstr;
        }
    }
    
    function GetCursorPsn(txb)     //獲取輸入框光標位置
    { 
       var psn = 0;
       if(txb.selectionStart)                 //FF
          psn =  txb.selectionStart;
       else if(txb.selection){
           var slct = document.selection;        //IE
           var rng = slct.createRange(); 
           txb.select(); 
           rng.setEndPoint("StartToStart", slct.createRange()); 
           psn = rng.text.length; 
           rng.collapse(false); 
           rng.select(); 
        } 
        return psn;
    }
    
    function setCaretPosition(elm, n) { 
        if(n > elm.value.length) 
            n = elm.value.length; 
        if(elm.createTextRange) {   // IE 
            var textRange = elm.createTextRange(); 
            textRange.moveStart('character', n);             
            textRange.collapse();        
            textRange.select();      
        } else if(elm.setSelectionRange) { // Firefox 
            elm.setSelectionRange(n, n); 
            elm.focus(); 
        } 
    } 
    
    
    function BmouseDrag(){
        var eventEle = hiddenbutton;
        var eventEleId; 
        var moveEle = keyboard;
        var stx = etx = curX  = 0;
        var keyboardfontsize = +moveEle.css("font-size").split('px')[0];
        var tempsize;
        eventEle.mousedown(function(event){
            bMouse = true;
            stx = event.pageX;    
            keyboardfontsize = +moveEle.css("font-size").split('px')[0];
            eventEleId = $(this).attr('id');
            event.preventDefault();
        });
        $("body").mousemove(function(event){            
        if(bMouse){
            var curX = event.pageX-stx;
            if(eventEleId==="keyboard_5xbogf8c_left"){
                tempsize = keyboardfontsize-Math.ceil(curX/10);
            }
            if(eventEleId==="keyboard_5xbogf8c_right"){
                tempsize = keyboardfontsize+Math.ceil(curX/10);
            }
            if(tempsize<keyboardRadixMin){
                tempsize=keyboardRadixMin;
            }
            moveEle.css({"font-size":tempsize});
            event.preventDefault();
        }});
        $("body").mouseup(function(event){
            stx = etx = curX = 0;
            bMouse = false;            
        });
    }
    
    function BtouchDrag() {
        var eventEle = hiddenbutton;
        var moveEle = keyboard;
        var eventEleId; 
        var stx = etx = curX  = 0;
        var keyboardfontsize = +moveEle.css("font-size").split('px')[0];
        var tempsize;
        eventEle.on("touchstart", function(event) { //touchstart
            var event = event.originalEvent;
            bToch = true;
            curX = 0;
            eventEleId = $(this).attr('id');
            keyboardfontsize = +moveEle.css("font-size").split('px')[0];
            stx = event.touches[0].pageX;
            sty = event.touches[0].pageY;
        });
        eventEle.on("touchmove", function(event) {
            if(bToch){
            var event = event.originalEvent;
            
            curX = event.touches[0].pageX - stx;
            if(eventEleId==="keyboard_5xbogf8c_left"){
                tempsize = keyboardfontsize-Math.ceil(curX/10);
            }
            if(eventEleId==="keyboard_5xbogf8c_right"){
                tempsize = keyboardfontsize+Math.ceil(curX/10);
            }
            if(tempsize<keyboardRadixMin){
                tempsize=keyboardRadixMin;
            }
            moveEle.css({"font-size":tempsize});
            event.preventDefault();
            }
            
        });
        eventEle.on("touchend", function(event) {
            stx = etx = curX = 0;
            bToch = false;
            
        })

    }

    function mouseDrag() {
        var eventEle = keyboard;
        var stx = etx = curX = sty = ety = curY = 0;
        var eleRight =+eventEle.css("right").split('px')[0];
        var eleBottom = +eventEle.css("bottom").split('px')[0];
        eventEle.mousedown(function(event){
        //console.log("down",+eventEle.css("right").split('px')[0]);
            if(!keyfixed){
                MAction = true;
            }
            //alert(MAction);
            stx = event.pageX;    
            sty = event.pageY;
            //eleRight = +eventEle.css("left").split('px')[0];
            //eleBottom = +eventEle.css("top").split('px')[0];
            eleRight = +eventEle.css("right").split('px')[0];
            eleBottom = +eventEle.css("bottom").split('px')[0];
            
            event.preventDefault();
        });
        $("body").mousemove(function(event){            
        if(MAction&&!bMouse){
            var curX = event.pageX-stx;
            var curY = event.pageY-sty;                
            eventEle.css({"right":eleRight-curX,"bottom":eleBottom-curY});
            //console.log("move",+eventEle.css("right").split('px')[0]);
            event.preventDefault();
        }});
        $("body").mouseup(function(event){
            stx = etx = curX = sty = ety = curY = 0;
            MAction = false;
            //console.log("up",+eventEle.css("right").split('px')[0]);
                
        });
    }
    
    function touchDrag() {
        var eventEle = keyboard;
        var stx = sty = etx = ety = curX = curY = 0;
        var MTouch = false;
        var eleRight = +eventEle.css("right").split('px')[0];
        var eleBottom = +eventEle.css("bottom").split('px')[0];        
        eventEle.on("touchstart", function(event) { //touchstart
           // alert(bToch);
            var event = event.originalEvent;
            MTouch = true;
            curX = curY = 0;
            // 元素當前位置
            eleRight = +eventEle.css("right").split('px')[0];
            eleBottom = +eventEle.css("bottom").split('px')[0];
            // 手指位置
            stx = event.touches[0].pageX;
            sty = event.touches[0].pageY;
            //console.log("up",+eventEle.css("right").split('px')[0]);
        });
        eventEle.on("touchmove", function(event) {
        
            if(MTouch&&!bToch){
            
            var event = event.originalEvent;
            event.preventDefault();
            curX = event.touches[0].pageX - stx;
            curY = event.touches[0].pageY - sty;
            //console.log("move",eleRight-curX);
            //alert(eleRight+"-"+gundongX);
            eventEle.css({"right":eleRight-curX,"bottom":eleBottom-curY});
            }
            
        });
        eventEle.on("touchend", function(event) {
            stx = etx = curX = sty = ety = curY = 0;
            MTouch = false;
            
        })
        
    }
    
    //模擬鍵盤事件,僅支持firefox，ie8-
    
    function simulateKeyEvent(target,keyCode)                         
    {         
        var customEvent = null;
        var a = typeof document.createEvent;

        if(typeof document.createEvent == "function"){//firefox
            try {
                customEvent = document.createEvent("KeyEvents");
                customEvent.initKeyEvent("keypress", true, true,window, false, false, false, false, keyCode, keyCode);     
                target.dispatchEvent(customEvent);
            } catch (ex){
                //console.log("This example is only demonstrating event simulation in firefox and IE.");        
            }
           

        } else if (document.createEventObject){ //IE
            customEvent = document.createEventObject();
            customEvent.bubbles = true;
            customEvent.cancelable = true;
            customEvent.view = window;
            customEvent.ctrlKey = false;
            customEvent.altKey = false;
            customEvent.shiftKey = false;
            customEvent.metaKey = false;
            customEvent.keyCode = keyCode;
            target.fireEvent("onkeypress", customEvent); 
                   
        } 
        else {
            //console.log("This example is only demonstrating event simulation in firefox and IE.");
        }
    }
    
}); 
}; 
})(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事件，如果監聽多次的話，每一次按鍵都會在輸入框中輸入幾個鍵值。