1、目前该键盘支持数字键盘，全字符键盘，实现代码如下：
function KeyBoard() {
function randomSortOne(a, b) {
return Math.random() > 0.5 ? 1 : -1;
}
function randomSortTwo(oldArr) {
var newArr = new Array;
var length = oldArr.length;
for(var i = 0; i < length; i ++) {
newArr[i] = oldArr.splice(Math.floor(Math.random() * oldArr.length), 1);
}
return newArr;
}
function getRandomNumber() {
var oldArr = new Array;
for(var i = 0; i < 10; i ++)
oldArr[i] = i;
oldArr.sort(randomSortOne);
return oldArr;
}
/**
* 获取随机字符数组
* @param startASCII 开始字符对应ASCII的值
* @param charNum 字符个数
* @returns {Array} 排序后字符数组
*/
function getRandomNomarlChar(startASCII, charNum) {
var charArr = new Array;
var i, j;
for(i = 0, j = startASCII; i < charNum; i ++, j++) {
charArr[i] = j;
}
charArr.sort(randomSortOne);
for(i = 0; i < charArr.length; i++) {
charArr[i] = String.fromCharCode(charArr[i]);
}
return charArr;
}
/**
* 获取特殊无序数组
* @param arr 特殊字符ASCII数组
* @returns 无序的ASCII数组
*/
function getRandomChar(arr) {
arr.sort(randomSortOne);
for(var i = 0; i < arr.length; i++) {
arr[i] = String.fromCharCode(arr[i]);
}
return arr;
}
/**
* 处理键盘事件，用于对软键盘操作
* @param sInputId 输入框id
* @param kb
* @returns {Boolean}
*/
function dealKeyBoardEvents(sInputId, kb) {
$("td", kb).mouseover(function() {
this.className += "kb-mouseover";
}).mouseout(function() {
this.className = this.className.replace("kb-mouseover", "");
}).click(function() {
if(this.id == "kbClose" || this.id == "kbEnter") { //关闭和确定键
kb.remove();
$("#" + sInputId).focus();
return false;
} else if(this.id == "kbClear") { //清除键
$("#" + sInputId).val("");
return false;
} else if(this.id == "kbBackspace") { //回格键
var sText = "";
var ilen = ($("#" + sInputId).val()).length;
if(ilen > 1) {
sText = ($("#" + sInputId).val()).substring(0, ilen - 1);
}
$("#" + sInputId).val(sText);
return false;
} else if(this.id == "kbCaps") { //大小写键
$(".kb-key", kb).each(function(i, o) {
var num = o.innerHTML.charCodeAt(0);
if(num >= 97 && num <= 122) {
o.innerHTML = String.fromCharCode(num).toUpperCase();
} else if(num >= 65 && num <= 90) {
o.innerHTML = String.fromCharCode(num).toLowerCase();
}
});
return false;
} else if(this.innerHTML == "<" && !isMaxLength(sInputId)) {
$("#" + sInputId).attr("value", $("#" + sInputId).val() + "\<");
} else if(this.innerHTML == ">" && !isMaxLength(sInputId)) {
$("#" + sInputId).attr("value", $("#" + sInputId).val() + "\>");
} else if(this.innerHTML == "&" && !isMaxLength(sInputId)) {
$("#" + sInputId).attr("value", $("#" + sInputId).val() + "\&");
} else if(this.innerHTML == " " && !isMaxLength(sInputId)) {
$("#" + sInputId).attr("value", $("#" + sInputId).val() + "");
} else {
if(!isMaxLength(sInputId)) {
$("#" + sInputId).attr("value", $("#" + sInputId).val() + this.innerHTML);
}
}
});
return false;
}
/**
* 获取数字键盘
* @param sInputId 输入框id
* @param kb 容器jQuery对象
* @returns {Boolean}
*/
function getNumerKeyBoard(sInputId, kb) {
var keyBoard = "<table class='kb-table'><tr>";
var numArr = getRandomNumber();
for(var i = 0; i < 10; i ++) {
if(i == 3) keyBoard += "<td id='kbClose' class='kb-close' colspan='2'>关闭</td>";
if(i == 6) keyBoard += "<td id='kbClear' class='kb-clear' colspan='2'>清除</td>";
if(i == 9) keyBoard += "<td id='kbEnter' class='kb-enter' colspan='2'>确定</td>";
if(i % 3 == 0 && i > 0) keyBoard += "</tr><tr>";
keyBoard += "<td class='kb-key'>" + numArr[i] + "</td>";
}
keyBoard += "<td class='kb-key'> </td><td id='kbBackspace' class='kb-backspace' colspan='3'>← 回格</td></tr></table>";
kb.html(keyBoard);
kb.appendTo("body");
dealKeyBoardEvents(sInputId, kb);
return false;
}
/**
* 获得全键盘
* @param sInputId 输入框的id
* @param kb 容器jQuery对象
* @returns {Boolean}
*/
function getAllKeyBoard(sInputId, kb) {
var i, keyBoard = "<table class='kb-table'><tr>";
var numArr = getRandomNumber();
var charNomarlArr = getRandomNomarlChar(97, 26);
var arr = [33,64,35,36,37,94,38,42,40,41,95,43];
var charArr = getRandomChar(arr);
//输出特殊字符
for(i = 0; i < charArr.length; i ++) {
keyBoard += "<td class='kb-key'>" + charArr[i] + "</td>";
}
keyBoard += "</tr><tr>";
//输出数字
for(i = 0; i < numArr.length; i ++) {
keyBoard += "<td class='kb-key'>" + numArr[i] + "</td>";
}
keyBoard += "<td id='kbBackspace' class='kb-bankspace' colspan='2'>← 回格</td></tr><tr>";
//输出字母字符
for(i = 0; i < charNomarlArr.length; i++) {
if(i == 10) keyBoard += "<td id='kbCaps' class='kb-caps' colspan='2'>大小写</td>";
if(i == 20) keyBoard += "<td id='kbClear' class='kb-clear' colspan='2'>清除</td>";
if(i % 10 == 0 && i > 0) keyBoard += "</tr><tr>";
keyBoard += "<td class='kb-key'>" + charNomarlArr[i] + "</td>";
}
keyBoard += "<td colspan='3' id='kbClose' class='kb-close'>关闭</td>";
keyBoard += "<td id='kbEnter' colspan='3' class='kb-enter'>确定</td></tr></table>";
kb.html(keyBoard);
kb.appendTo("body");
dealKeyBoardEvents(sInputId, kb);
return false;
}
/**
* 是否达到输入的最大长度
* @param sInputId 输入框的id
* @returns {Boolean}
*/
function isMaxLength(sInputId) {
var sValue = $("#" + sInputId).attr("maxlength");
if(sValue != null && sValue != undefined && sValue != "" && ($("#" + sInputId).val()).length == Number(sValue)) {
return true;
}
return false;
}
/**
* 显示键盘
* @param sInputId 输入框的id
* @param keyStatus 显示键盘的类型
*/
this.showKeyBoard = function(sInputId, keyStatus) {
$("#" + sInputId).focus(function() {
this.blur();
});
var kb = $("#keyboard");
if(kb.length != 0) {
kb.remove();
$("#" + sInputId).focus();
return false;
}
kb = $("<div id='keyboard' class='kb-div'></div>");
if(keyStatus == KeyStatus.KEY_NUMBER) {
getNumerKeyBoard(sInputId, kb);
} else if(keyStatus == KeyStatus.KEY_ALL) {
getAllKeyBoard(sInputId, kb);
}
// 配置显示键盘在输入框的位置
var offset = $("#" + sInputId).offset();
var left = offset.left;
var height = $("#" + sInputId).height();
var top = offset.top + height + 15;
kb.css({left: left + "px", top: top + "px"});
};
}
/**
* 键盘类型常量
*/
var KeyStatus = {
KEY_NUMBER: 0, //数字键盘
KEY_ALL : 1 //全键盘
};
2、样式文件：
/*软键盘样式-------------*/
/*软键盘父容器样式*/
.kb-div {
border:2px solid #ccc;
background: #f2f2f2;
cursor: pointer;
font: 12px "Arial" "Helvetica" "sans-serif";
position: absolute;
z-index: 100;
}
/*软键盘表格容器样式*/
.kb-table {
border-collapse: separate;
border-spacing: 3px;
}
/*软键盘单元格样式*/
.kb-table td{
border-right: 1px solid #9F9F9F;
border-bottom: 1px solid #9F9F9F;
line-height: 18px !important;
text-align: center;
}
/*软键盘[数字]样式*/
.kb-key {
background: white;
padding:0 5px;
width:18px;
}
/*软键盘[关闭，清除，大小写]样式*/
.kb-close,.kb-clear,.kb-caps,.kb-backspace{
background: #ddd;
color:#039;
font-weight:bold;
text-align: center;
width:57px;
}
/*软键盘单元格鼠标动作样式*/
td.kb-mouseover {
background: url(img/time_date_bg.gif) repeat-x;
color: #fff;
}
3、举例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<link rel="stylesheet" type="text/css" href="KeyBoard.css" media="all"/>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="KeyBoard.js"></script>
<script type="text/javascript">
function showKeyBoard() {
var keyBoard = new KeyBoard();
keyBoard.showKeyBoard("inPwd", 1);
}
</script>
<title>软键盘</title>
</head>
<body>
<div>
<table>
<tr>
<td>密码:</td>
<td><input id="inPwd" name="inPwd" type="password" maxlength="6" onclick="showKeyBoard();"/></td>
</tr>
</table>
</div>
</body>
</html>
相关推荐
一个非常好用的jquery 数字键盘 看一眼就能使用 用起来非常简单 键盘样式非常好看
非常简洁的一款jQuery虚拟数字键盘插件，调用也很简单，点击输入框弹出虚拟数字键盘按键输入效果。
jQuery虚拟数字键盘 网上找例子改的，出处忘了，见谅！ 代码通俗易懂，很容易二次改造。
jQuery虚拟键盘数字字母软键盘代码基于jquery-1.7.js制作，代码包含数字虚拟键盘，字母软键盘，符号网页键盘，有清空和退格键。
jQuery验证码随机数字运算代码是一款随机改变验证码数字，运算符号和背景颜色。
jQuery.NumPad是一款移动端友好的jQuery数字键盘插件。jQuery.NumPad插件通过设置模板可以轻松的和大部分的UI框架结合使用。可以用该插件来填充数字字段，密码等表单域。
jQuery虚拟数字键盘按键输入代码是一款简单好调用的虚拟键盘插件，点击输入框弹出虚拟数字键盘按键输入效果。
jQuery.NumPad是一款移动端友好的jQuery数字键盘插件。jQuery.NumPad插件通过设置模板可以轻松的和大部分的UI框架结合使用。可以用该插件来填充数字字段，密码等表单域。
jquery实现的数字小键盘，限制用户只能输入数字。
jQuery键盘插件网页虚拟键盘输入代码 jQuery键盘插件网页虚拟键盘输入代码
jQuery在设定范围随机抽取数字
jQuery随机数字抽奖代码基于jquery-1.9.1.min.js制作的数字抽奖网页代码，共1-16，16个数字，点击“点我抽奖”按钮，数字变色，顺着方框转动，数字停止转动，显示中奖号码，
jquery 监听 键盘 事件
jQueryUI jQueryUI插件 键盘插件 基于 jQueryUI 的小键盘 可灵活修改
jQuery.NumPad是一款移动端友好的jQuery数字键盘插件。jQuery.NumPad插件通过设置模板可以轻松的和大部分的UI框架结合使用。可以用该插件来填充数字字段，密码等表单域。
jquery 开发所用的开发包 jquery 开发所用的开发包 jquery 开发所用的开发包
jQuery软键盘模拟键盘插件实例应用。
这是采用jQuery js 库自定义的一个数字输入键盘，解决Android ,Windows Phone7 ,iPhone,BlackBerry，ipad 等移动设备弹出输入键盘切换的麻烦，此数字输入控件使用简单，且自适应屏幕输入控件，只可以输入数字和...
第1章 Web开发的发展与趋势 第2章 JavaScript基础 第3章 文档对象模型（DOM） ...第16章 jQuery键盘操作 第17章 jQuery可视化数据显示 本资料共包含以下附件： 《jQuery开发技术详解》光盘 源文件+ppt.rar