JS Virtual Numeric keypad

Page code:

@Html. Textboxfor (M=>model.fbp[i]. realnumb,new{onclick= "Showkeyboard (' Txtrealnumbopr ')", id= "TXTREALNUMBOPR"})

JS file referenced by:

<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 Code:

CSS file

@charset "Utf-8";/*@ Soft Keyboard 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;d isplay:block;font-size:12px;} #kbback {background:#000;width:68px;height:20px;line-height:20px; Text-align:center;color: #fff;d isplay:block;font-size:12px;margin-left:3px;}

JS file:

/** JS Keyboard-Randomly generated soft keyboard.*/functionRandomsort (A, b) {returnMath.random ()-0.5;}functionGetrandomnum () {varnumarray=NewArray (); vari;  for(i=0;i<10;i++) Numarray[i]=i;//generate an array    //Numarray.sort (randomsort);    returnNumarray;}functionGetrandomchar () {varchararray=NewArray (); vari,j;  for(i=0,j=97;j<123;i++,j++) Chararray[i]=j;//Generate AlphabetChararray.sort (Randomsort); //Translation of Letters     for(i=0;i<chararray.length;i++) Chararray[i]=String.fromCharCode (Chararray[i]); returnChararray;}functionShowkeyboard (inputid) {varKB = $ (' #yh_KeyBoard '); if(kb.length!=0) {kb.remove (); return false; } KB= $ (' <div id= "Yh_keyboard" class= "Kbdiv" ></div> "); varI=0; varKeyboard = ' <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" > Case </td> ";Keyboard + = ' <td><em id= "Kbclose" class= "Kbcolspan" > Confirmation </em></td> '; Keyboard+ = ' <td><em id= "Kbback" class= "Kbcolspan" > Backspace </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;//        }        //BACKSPACE        if( This. id = = ' kbback '){            varPW = $ (' #txtRealNumbOpr '). Val (); //alert (PP)$ (' #txtRealNumbOpr '). Val (pw.substr (0, Pw.length-1)); return false; }                $("#" +inputid). attr ("Value", $ ("#" +inputid). Val () + This. InnerHTML);        }); varOffset = $ ("#" +inputid). offset (); varleft =Offset.left; varHeight = $ ("#" +inputid). Height (); vartop = offset.top+height+8; Kb.css ({"Left": left+ "px", "Top": top+ "px", "position": "Absolute", "z-index": "100"}); return false;}

JS Virtual Numeric keypad