js虚拟数字小键盘

效果图

页面代码：

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

引用的js文件:

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;  }

热门搜索

js虚拟数字小键盘