效果图
页面代码:
@Html.TextBoxFor(m=>Model.FBP[i].RealNumb,new{οnclick="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;width: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 {width: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;width:68px;height:20px;line-height:20px; text-align:center;color:#fff;display:block;font-size:12px;}
#kbback {background:#000;width: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;
}