jQuery开发的随机键盘，支持数字键盘和全键盘

1、目前该键盘支持数字键盘，全字符键盘，实现代码如下：

function  KeyBoard() {
    function randomSortOne(a, b) {
        return Math.random() > 0.5 ? 1 : -1;
    } 

    function randomSortTwo(oldArr) {
        var newArr = new Array;
        var length = oldArr.length;
        for(var i = 0; i < length; i ++) {
            newArr[i] = oldArr.splice(Math.floor(Math.random() * oldArr.length), 1);
        }
        return newArr;
    }

 
    function getRandomNumber() {
        var oldArr = new Array;
        for(var i = 0; i < 10; i ++) 
            oldArr[i] = i;
        oldArr.sort(randomSortOne);
        return oldArr;
    } 

    /**
     * 获取随机字符数组
     * @param startASCII 开始字符对应ASCII的值
     * @param charNum    字符个数
     * @returns {Array}  排序后字符数组
     */
    function getRandomNomarlChar(startASCII, charNum) {
        var charArr = new Array;
        var i, j;
        for(i = 0, j = startASCII; i < charNum; i ++, j++) {
            charArr[i] = j;
        }
        charArr.sort(randomSortOne);
        for(i = 0; i < charArr.length; i++) {
            charArr[i] = String.fromCharCode(charArr[i]);
        }
        return charArr;
    }

 
    /**
     * 获取特殊无序数组
     * @param arr 特殊字符ASCII数组
     * @returns   无序的ASCII数组
     */
    function getRandomChar(arr) {
       arr.sort(randomSortOne);
       for(var i = 0; i < arr.length; i++) {
           arr[i] = String.fromCharCode(arr[i]);
       }
       return arr;
    }

 
    /**
     * 处理键盘事件，用于对软键盘操作
     * @param sInputId 输入框id
     * @param kb  
     * @returns {Boolean}
     */
    function dealKeyBoardEvents(sInputId, kb) {
        $("td", kb).mouseover(function() {
            this.className += "kb-mouseover";
        }).mouseout(function() {
            this.className = this.className.replace("kb-mouseover", "");
        }).click(function() {
            if(this.id == "kbClose" || this.id == "kbEnter") {    //关闭和确定键
                kb.remove();                   
                $("#" + sInputId).focus();             
                return false;
            } else if(this.id == "kbClear") {                     //清除键
                $("#" + sInputId).val("");
                return false;
            } else if(this.id == "kbBackspace") {                 //回格键
                var sText = "";
                var ilen = ($("#" + sInputId).val()).length;
                if(ilen > 1) {
                    sText = ($("#" + sInputId).val()).substring(0, ilen - 1);
                }
                $("#" + sInputId).val(sText);
                return false;
            } else if(this.id == "kbCaps") {                      //大小写键
                $(".kb-key", kb).each(function(i, o) {
                    var num = o.innerHTML.charCodeAt(0);
                    if(num >= 97 && num <= 122) {
                        o.innerHTML = String.fromCharCode(num).toUpperCase();
                    } else if(num >= 65 && num <= 90) {
                        o.innerHTML = String.fromCharCode(num).toLowerCase();
                    }
                });
                return false;
            } else if(this.innerHTML == "<" && !isMaxLength(sInputId)) {       
                $("#" + sInputId).attr("value", $("#" + sInputId).val() + "\<");
            } else if(this.innerHTML == ">" && !isMaxLength(sInputId)) {                 
                $("#" + sInputId).attr("value", $("#" + sInputId).val() + "\>");
            } else if(this.innerHTML == "&" && !isMaxLength(sInputId)) {                                
		$("#" + sInputId).attr("value", $("#" + sInputId).val() + "\&");
            } else if(this.innerHTML == " " && !isMaxLength(sInputId)) {              
                $("#" + sInputId).attr("value", $("#" + sInputId).val() + "");
            } else {                                              
                if(!isMaxLength(sInputId)) {
                    $("#" + sInputId).attr("value", $("#" + sInputId).val() + this.innerHTML);
                }
            }
        });
        return false;
    } 

    /**
     * 获取数字键盘
     * @param sInputId  输入框id
     * @param kb        容器jQuery对象
     * @returns {Boolean}
     */
    function getNumerKeyBoard(sInputId, kb) {
        var keyBoard = "";
        var numArr = getRandomNumber();
        for(var i = 0; i < 10; i ++) {
            if(i == 3) keyBoard += "";
            if(i == 6) keyBoard += "";
            if(i == 9) keyBoard += "";
            if(i % 3 == 0 && i > 0) keyBoard += "";
            keyBoard += "";
        }
        keyBoard += "
关闭
清除
确定
" + numArr[i] + "
 
← 回格
";
        kb.html(keyBoard);
        kb.appendTo("body");
        dealKeyBoardEvents(sInputId, kb);
        return false;
    } 
    /**
     * 获得全键盘
     * @param sInputId      输入框的id
     * @param kb            容器jQuery对象
     * @returns {Boolean}
     */
    function getAllKeyBoard(sInputId, kb) {
        var i, keyBoard = "";
        var numArr = getRandomNumber();
        var charNomarlArr = getRandomNomarlChar(97, 26);
        var arr = [33,64,35,36,37,94,38,42,40,41,95,43];
        var charArr = getRandomChar(arr);
        //输出特殊字符
        for(i = 0; i < charArr.length; i ++) {
            keyBoard += "";
        }
        keyBoard += "";
        //输出数字
       for(i = 0; i < numArr.length; i ++) {
           keyBoard += "";
       }
       keyBoard += "";
       //输出字母字符
       for(i = 0; i < charNomarlArr.length; i++) {
           if(i == 10) keyBoard += "";
           if(i == 20) keyBoard += "";
           if(i % 10 == 0 && i > 0) keyBoard += "";
           keyBoard += "";
       }
       keyBoard += "";
       keyBoard += "
" + charArr[i] + "
" + numArr[i] + "
← 回格
大小写
清除
" + charNomarlArr[i] + "
关闭
确定
";
       kb.html(keyBoard);
       kb.appendTo("body");
       dealKeyBoardEvents(sInputId, kb);
       return false;
    } 

    /**
     * 是否达到输入的最大长度
     * @param sInputId      输入框的id
     * @returns {Boolean}
     */
    function isMaxLength(sInputId) {
        var sValue = $("#" + sInputId).attr("maxlength");
        if(sValue != null && sValue != undefined && sValue != "" && ($("#" + sInputId).val()).length == Number(sValue)) {
            return true;
        }
        return false;
    } 
    /**
     * 显示键盘
     * @param sInputId      输入框的id
     * @param keyStatus     显示键盘的类型
     */
     this.showKeyBoard = function(sInputId, keyStatus) {
         $("#" + sInputId).focus(function() {
             this.blur();
         });
         var kb = $("#keyboard");
         if(kb.length != 0) {
             kb.remove();
             $("#" + sInputId).focus();
             return false;
         }
         kb = $("
");
         if(keyStatus == KeyStatus.KEY_NUMBER) {                 
             getNumerKeyBoard(sInputId, kb);
         } else if(keyStatus == KeyStatus.KEY_ALL) {             
             getAllKeyBoard(sInputId, kb);
         }
         // 配置显示键盘在输入框的位置
         var offset = $("#" + sInputId).offset();
         var left = offset.left;
         var height = $("#" + sInputId).height();
         var top = offset.top + height + 15;
         kb.css({left: left + "px", top: top + "px"});
    };
}

/**
 * 键盘类型常量
 */
var KeyStatus = {
 KEY_NUMBER: 0,               //数字键盘
 KEY_ALL   : 1                //全键盘
};
 

 

2、样式文件：
/*软键盘样式-------------*/

/*软键盘父容器样式*/
.kb-div {
   border:2px solid #ccc;
   background: #f2f2f2;
   cursor: pointer;
   font: 12px "Arial" "Helvetica" "sans-serif";
   position: absolute;
   z-index: 100;
}
/*软键盘表格容器样式*/
.kb-table {
   border-collapse: separate;
   border-spacing: 3px;
}
/*软键盘单元格样式*/
.kb-table td{
   border-right: 1px solid #9F9F9F;
   border-bottom: 1px solid #9F9F9F;
   line-height: 18px !important;
   text-align: center;

}
/*软键盘[数字]样式*/
.kb-key {
   background: white;
   padding:0 5px;
   width:18px;
}
/*软键盘[关闭，清除，大小写]样式*/
.kb-close,.kb-clear,.kb-caps,.kb-backspace{
   background: #ddd;
   color:#039;
   font-weight:bold;
   text-align: center; 
   width:57px;
}

/*软键盘单元格鼠标动作样式*/
td.kb-mouseover {
   background: url(img/time_date_bg.gif) repeat-x;
   color: #fff;
}

 

3、举例：


  
    
    
        
    
 
    
    
    
    
  
  
    

     

       

         
密码: