js虚拟数字小键盘

效果图

页面代码：

@Html.TextBoxFor(m=>Model.FBP[i].RealNumb,new{onclick="showKeyboard('txtRealNumbOpr')", id="txtRealNumbOpr"})

引用的js文件:

<script src="@Url.Content("~/Content/jquery.keyboard/js/keyboard.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/jquery.keyboard/css/keyboardnew.css")" rel="stylesheet" type="text/css" />

jquery代码：

css文件

@charset "utf-8";
/*
@软键盘style
*/
.kbkey,.kbmouseover,#kbclose,#kbback {background:url(keyboard.png) no-repeat;}

.kbdiv { background:#fff; border:3px solid #e25102;font-size:12px;240px;padding:2px;font-family:Arial, Helvetica, sans-serif; border-radius:3px;box-shadow:2px 2px 3px #aaa; }
.kbdiv em {font-style:normal;cursor:pointer;}
.kbkey {60px;height:60px;line-height:60px;display:inline-block;text-align:center;font-size:24px;margin:4px;}
/*.kbmouseover {background-position:-21px 0;color:#fff;}*/
.kbdiv table {border-collapse:collapse;}
#kbclose {background:#000;68px;height:20px;line-height:20px; text-align:center;color:#fff;display:block;font-size:12px;}
#kbback {background:#000;68px;height:20px;line-height:20px; text-align:center;color:#fff;display:block;font-size:12px;margin-left:3px;}

js文件：

/*
 * JS Keyboard - 随机生成的软键盘.
*/

function RandomSort(a,b){
    return Math.random() - 0.5;
}

function getRandomNum()
{
    var numArray=new Array();
    var i;
    for(i=0;i<10;i++)
      numArray[i]=i;//生成一个数组
    //numArray.sort(RandomSort);
    return numArray;
}

function getRandomChar()
{
    var charArray=new Array();
    var i,j;
    for(i=0,j=97;j<123;i++,j++)
      charArray[i]=j;//生成字母表
    charArray.sort(RandomSort);
    //对字母进行翻译
    for(i=0;i<charArray.length;i++)
        charArray[i] = String.fromCharCode(charArray[i]);
    return charArray;
}

function showKeyboard(inputId)
{
    var kb = $('#yh_KeyBoard');
    if (kb.length!=0)
    {
        kb.remove();
        return false;
    }
    
    kb = $('<div id="yh_KeyBoard" class="kbdiv"></div>');
    var i=0;
    var keyboard = '<div class="kbtable">';
    numArray = getRandomNum();
    charArray = getRandomChar();
    for(i=0;i<10;i++)
    {
        keyboard += '<em class="kbkey">'+numArray[i]+'</em>';
    }
    keyboard += "</div><table><tr>";
//    for(i=0;i<26;i++)
//    {
//        if (i%10==0 && i>0)
//            keyboard += "</tr><tr>";
//        keyboard += '<td class="kbkey">'+charArray[i]+'</td>';
//    }
    //keyboard += '<td id="kbcaps" colspan="2" class="kbcolspan">大小写</td>';
    keyboard += '<td><em id="kbclose" class="kbcolspan">确认</em></td>';
    keyboard += '<td><em id="kbback" class="kbcolspan">退 格</em></td>';
    keyboard += '</tr></table>';
    kb.html(keyboard);
    kb.appendTo('body');

$("em",kb).mouseover(function() {
        this.className += " kbmouseover";
    }).mouseout(function() {
        this.className = this.className.replace(" kbmouseover","");
    }).click(function() {
        
        if(this.id == "kbclose") {
            kb.remove();
            return false;
        }
//        else if(this.id == "kbcaps") {
//            $.each($(".kbkey",kb),function(i,o) {
//                var num = o.innerHTML.charCodeAt(0);
//                if(num>96 && num<123)
//                    o.innerHTML = o.innerHTML.toUpperCase();
//                else if(num>64 && num<91)
//                    o.innerHTML = o.innerHTML.toLowerCase();
//            });
//
//            return false;
//        }
        //退格
        if(this.id == 'kbback'){
            var pw = $('#txtRealNumbOpr').val();
            //alert(pp)
            $('#txtRealNumbOpr').val(pw.substr(0, pw.length - 1));
            return false;
        }
        
        $("#"+inputId).attr("value",$("#"+inputId).val()+this.innerHTML);
    });
    
    var offset = $("#"+inputId).offset();
    var left = offset.left;
    var height = $("#"+inputId).height();
    var top = offset.top+height+8;
    kb.css({"left": left+"px", "top": top+"px","position":"absolute","z-index":"100"});
    return false;
}