你的位置:首页 > Java教程

[Java教程]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;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" ></div>');  var i=0;  var keyboard = '<div >';  numArray = getRandomNum();  charArray = getRandomChar();  for(i=0;i<10;i++)  {    keyboard += '<em >'+numArray[i]+'</em>';  }  keyboard += "</div><table><tr>";//  for(i=0;i<26;i++)//  {//    if (i%10==0 && i>0)//      keyboard += "</tr><tr>";//    keyboard += '<td >'+charArray[i]+'</td>';//  }  //keyboard += '<td id="kbcaps" colspan="2" >大小写</td>';  keyboard += '<td><em id="kbclose" >确认</em></td>';  keyboard += '<td><em id="kbback" >退 格</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;}