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虚拟数字键盘插件**是一种实用的前端开发工具，主要应用于移动设备或触摸屏设备上的Web应用，为用户提供一个方便的数字输入界面。在网页上，它模拟了一个物理数字键盘，用户可以通过触摸屏幕来输入数字，而...
总结来说，jQuery虚拟键盘数字字母软键盘代码是网页开发中的实用工具，通过利用jQuery的强大功能，为用户提供直观、方便的输入体验。无论是数字输入、字母输入还是符号输入，都能有效地提升网页的交互性和用户满意度...
**jQuery虚拟数字键盘** 在网页应用中，有时我们需要为用户提供一个仅限数字输入的界面，例如在填写电话号码、身份证号或密码时。在这种情况下，使用传统的文本输入框可能不够安全或者不够用户友好。为此，我们可以...
jQuery NumPad插件是基于流行的JavaScript库jQuery构建的，它的主要功能是提供一个可自定义的数字键盘界面，用户可以直接在移动端设备上进行数字输入，而无需与全尺寸的虚拟键盘进行交互。这不仅优化了用户体验，还...
《jQuery虚拟数字键盘按键输入代码详解》 在现代网页开发中，为了提升用户体验，尤其是在移动设备上处理敏感信息（如密码输入）时，虚拟键盘成为了一种必要的交互方式。"jQuery虚拟数字键盘按键输入代码"就是一个...
【jQuery数字键盘】是一种网页交互元素，主要用于网页上的数字输入场景，例如在线表格、金融计算器或者密码输入等。它提供了一种便捷的方式，使用户无需离开当前页面就能通过模拟的数字键盘输入数值，提升了用户体验...
为了解决这一问题，开发人员创建了`jQuery.NumPad`这款插件，它专为移动端设计，提供了一个友好的数字键盘，方便用户在数字输入场景下进行快速、准确的输入。 `jQuery.NumPad`的核心功能是生成一个可自定义的数字...
本项目"jquery实现的数字小键盘"是利用jQuery来创建一个专用于输入数字的虚拟键盘，确保用户输入的数据始终保持为数字格式，避免了在输入过程中可能出现的非数字字符，从而提高数据的准确性和安全性。 首先，我们要...
jQuery作为一款广泛使用的JavaScript库，提供了丰富的功能来优化网页交互，其中包括在手机移动端实现点击弹出数字键盘输入的功能。本篇文章将深入探讨这一话题，帮助开发者理解并掌握相关技术。 首先，我们需要了解...
总结起来，jQuery数字软键盘是一种实用的网页开发技术，尤其适用于移动设备或者需要安全数字输入的场景。通过理解和实践，我们可以创建出符合特定需求的数字输入解决方案，提升用户的输入体验。
jQuery验证码随机数字运算代码是为网页开发设计的一种验证码实现方式，它通过JavaScript（JS）动态生成包含数字和运算符号的随机验证码，增加了破解的难度，同时提供了一种更友好的用户体验。 首先，jQuery是一个...
这使得它能够适应各种场景，如数字输入、全键盘输入或者特定字符集的输入。 2. **易用性**：只需简单的几行代码，开发者就能将键盘插件集成到页面中，大大减少了开发时间和复杂度。通常，你只需要选择一个元素（如...
使用jquery实现的一个简单的虚拟键盘，该键盘使用时引入jquery。键盘针对input type为text的时候进行响应。
jQuery软键盘模拟键盘是一种在网页上实现用户交互的实用工具，尤其适用于移动设备或需要在特定输入区域模拟物理键盘的场景。这个插件利用JavaScript库jQuery的强大功能，为用户提供了一个可自定义、易于集成的虚拟...
为了改善这一情况，`jQuery.NumPad`是一个专门设计的数字键盘插件，旨在提供一个便捷、自定义且兼容多UI框架的解决方案。这款插件是针对移动端优化的，确保用户在触摸屏设备上填写数字字段或密码输入时能有流畅的...
《jQuery随机数字抽奖代码》是基于JavaScript...整体来看，这个jQuery随机数字抽奖代码是一个结合了jQuery基础用法、DOM操作、动画效果和随机数生成的实例，适合初学者了解和学习Web开发中的互动元素和基本的动画实现。
本文将深入探讨如何使用jQuery来监听键盘事件，以及相关的应用场景和技巧。 ### 1. jQuery键盘事件绑定 jQuery提供了`.on()`方法来绑定事件，包括键盘事件。键盘事件主要有三种类型： - `keydown`：当用户按下...
**jQuery虚拟数字键盘插件**是一种用于网页交互增强的实用工具，主要针对那些需要用户输入数字的场景，如在线支付、手机号码验证等。通过这个插件，开发者能够轻松地在网页上添加一个可自定义的数字键盘，提高用户...