js虚拟数字小键盘详解编程语言

效果图

页面代码：

@Html.TextBoxFor(m= Model.FBP[i].RealNumb,new{ #8221;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 i++) 

 numArray[i]=i;//生成一个数组 

 //numArray.sort(RandomSort); 

 return numArray; 

function getRandomChar() 

 var charArray=new Array(); 

 var i,j; 

 for(i=0,j=97;j 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 i++) 

 keyboard +=  em +numArray[i]+ /em 

 keyboard += " /div table tr 

// for(i=0;i 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; 

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/8777.html