效果图

页面代码:

@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" 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虚拟数字小键盘的更多相关文章

  1. JS虚拟键盘

    由于是触摸屏,所以需要一款JS虚拟键盘.上网找了一个好用的VirtualKeyboard,作了修改. 修改该插件参考的博客文章:http://www.cnblogs.com/xinggong/arch ...

  2. js代理模式

    代理模式的关键是,当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象来控制对这个对象的访问,客户实际上访问的是替身对象.替身对象对请求做出一些处理之后,再把请求转交给本体对象. 代理模 ...

  3. js面向(基于)对象编程—类(原型对象)与对象

    JS分三个部分: 1. ECMAScript标准--基础语法 2. DOM  Document Object Model 文档对象模型 3. BOM  Browser Object Moldel 浏览 ...

  4. jquery 插件

    1 jquery.slimscroll.min.js:虚拟滚轴 2 jquery.steps.js:步骤(注册下一步) 3 jquery-barcode.js:条形码

  5. nodejs之异步思想

    nodejs的精髓就是"异步",但什么是异步呢?我们来看一个例子: var start =new Date; setTimeout(function(){ var end =new ...

  6. html5 shiv

    使用html5标签吧!ie6.ie7.ie8不支持怎么办?它的原理是如此的简单:    1.document.createElement("ele");  // js虚拟创建一个元 ...

  7. React 组件开发初探

    react.js 在线地址:http://slides.com/yueyao/deck/#/ COMPONENT JSX 预编译语言, 一个基于ECMAscript 的xml-link 的语法扩展,最 ...

  8. 一套代码小程序&Web&Native运行的探索03——处理模板及属性

    接上文:一套代码小程序&Web&Native运行的探索02 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...

  9. vue源码分析—认识 Flow

    认识 Flow Flow 是 facebook 出品的 JavaScript 静态类型检查⼯具.Vue.js 的源码利⽤了 Flow 做了静态类型检查, 所以了解 Flow 有助于我们阅读源码 Flo ...

随机推荐

  1. Oracle中 HWM与数据库性能的探讨

    链接:http://www.eygle.com/archives/2011/11/oracle_hwm_tuning.html 本文讨论的是oracle中关于table的HWM的内容,主要包括这样几个 ...

  2. python操作excel表格文件--使用xlrd模块

    原文: http://www.cnblogs.com/lhj588/archive/2012/01/06/2314181.html 引言: 实际工作中,可能很多情况下都会用到excel表格,像如果不需 ...

  3. React-Todos

    最近学完React的最基本概念,闲下来的时候就自己写了一个Todo-List的小应用.这里做个简略的说明,给想好好学React的新手看. React-Todo 学习前提 这里我用了webpackb做了 ...

  4. 使用TCPDF输出完美的中文PDF文档

    TCPDF是一个用于快速生成PDF文件的PHP5函数包.TCPDF基于FPDF进行扩展和改进.支持UTF-8,Unicode,HTML和XHTML.在基于PHP开发的Web应用中,使用它来输出PDF文 ...

  5. MySQL GTID (二)

    MySQL GTID 系列之二 三.在线将GTID转化为传统模式 环境见上篇系列文章 关闭GTID,不用停止服务,不影响线上业务 3.1 关闭GTID复制,调整为传统复制 #SLVAE实例上停止复制 ...

  6. python 画直方图

    import numpy as npimport matplotlib.pyplot as plt def sample_data(size,length=100): data=[] for i in ...

  7. fast-dfs

    转http://www.cnblogs.com/jym-sunshine/p/6397470.html FastDFS安装全过程记录 1.安装准备 HA虚拟IP:192.168.1.208 HA软件: ...

  8. python之private variable

    [python之private variable] Since there is a valid use-case for class-private members (namely to avoid ...

  9. 更改Mysql数据库数据存储位置的具体步骤

    首先把mysql的服务先停掉,更改MySQL配置文件My.ini中的数据库存储主路径,将老的数据库存储主路径中的数据库文件和文件夹复制到新的存储主路径,接下来重启搞定. 一.首先把mysql的服务先停 ...

  10. 四种常见的 POST 提交数据方式,使用postman会用到

    http://www.aikaiyuan.com/6324.html 用postman时候,选错了就出不来结果.用postman选择 application/x-www-form-urlencoded