现在需要一个只是数字的软键盘，呵呵，自己花了几个小时，搞出来了，记下来，备以后使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#pwd").bind('focus', function() {
//键盘初始化
var arr = [0,1,2,3,4,5,6,7,8,9];
$(".vkli").each(function(i){
var index = parseInt(Math.random()*arr.length);
$(this).html(arr[index]).css({"cursor":"pointer"}).hover(
function () {
$(this).css({"background-color":"#3399cc"});
},
function () {
$(this).css({"background-color":"#669999"});
}
);
arr.splice(index,1);
});
var l = $(this).offset().left;
//键盘显示
$("#vk").css({"position":"absolute","margin-top":0,"margin-left":l}).show();
});
//点击数字
$(".vkli").bind('click',function(){
$("#pwd").val($("#pwd").val() + "" + $(this).html());
});
//清空 确认
$("#vkbtnClear").css({"cursor":"pointer"}).bind('click',function(){
$("#pwd").val("");
});
$("#vkbtnOK").css({"cursor":"pointer"}).bind('click',function(){
$("#vk").hide();
});
});
</script>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
#vk{
width:180px;
}
#vk ul{
list-style-type:none;
text-align:center;
width:172px;
}
#vk ul .vkli{
width:20px;
height:20px;
vertical-align : middle;
text-align:center;
float:left;
border : 1px solid black;
background-color : #669999;
}
#vk ul .vkbtn{
width:60px;
height:20px;
vertical-align : middle;
text-align:center;
float:left;
border : 1px solid black;
background-color : #6699cc;
}
</style>
</head>
<body>
<br />
用户名：<input type="text" id="" />
<br />
密码：<input type="text" id="pwd" readonly="true"/>
<div id="vk" style="display:none">
<ul>
<li class="vkli">0</li>
<li class="vkli">1</li>
<li class="vkli">2</li>
<li class="vkli">3</li>
<li class="vkli">4</li>
<li class="vkbtn" id="vkbtnClear">清空</li>
</ul>
<ul>
<li class="vkli">5</li>
<li class="vkli">6</li>
<li class="vkli">7</li>
<li class="vkli">8</li>
<li class="vkli">9</li>
<li class="vkbtn" id="vkbtnOK">确认</li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
在本项目中，我们将探讨如何使用jQuery库来创建一个简单的数字键盘，以便用户能更方便地在特定文本框中输入数字，特别是用于密码输入等场景。 jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画...
JavaScript（简称JS）是一种轻量级的解释型编程语言，常用于网页和网络应用开发。在移动设备或网页中，由于安全原因，通常不允许直接访问硬件键盘，因此开发者需要为输入框提供虚拟键盘，以便用户在触摸屏上进行输入...
JavaScript（简称js）是这个项目的核心，它用于处理用户的交互，实现数字键盘的动态显示和功能。通过JavaScript，我们可以监听input元素的事件，比如focus（聚焦）和blur（失焦），来判断何时应该显示或隐藏数字键盘...
例如，在微信支付中，为了保护用户的安全，通常会要求用户通过数字键盘输入支付密码，而模拟键盘则能提供这样的功能，同时避免了实体键盘可能存在的监听风险。 在文件名称列表中，我们看到了"qrPay"，这可能是一个...
数字键盘软键盘可以通过JavaScript加密库对用户输入的数据进行加密，防止数据在传输过程中被窃取。同时，可以使用HTTPS协议确保数据在客户端和服务器间的通信安全。 5. 键盘功能扩展： 除了基本的数字输入，数字...
首先，你需要在页面中引入jQuery库和这个数字键盘的JavaScript文件。接着，通过jQuery的选择器找到需要添加数字键盘的输入元素，并调用相应的函数来初始化和显示键盘。例如： ```html <!DOCTYPE html> ...
本项目提供了一个“数字键盘”，它具有纯JavaScript（js）和jQuery（jq）两个版本，适用于创建一个只允许输入数字的简单键盘。 首先，我们来探讨纯JavaScript实现的数字键盘。JavaScript是一种广泛使用的客户端脚本...
"存js手写数字键盘带小数点"的实现是为了解决这个问题，它提供了一个自定义的软键盘，用户可以点击弹出，并在输入框中输入带有小数点的数字。这个解决方案主要基于JavaScript、CSS和HTML技术，非常适合在微信或...
JavaScript随机数字键盘模拟器是一种常见的前端开发功能，用于在网页上模拟手机或计算器的数字输入键盘，常见于移动设备上的密码输入、数字选择等场景。本文将深入探讨如何使用JavaScript来实现这样的功能，包括基本...
使用到两个input交替层级，交替设置readonly=readonly来冻结， 以使input 文本框正常 聚焦。 由于本人实在是不知道移动端的，...js采用jquery写的。并没有封装---------;实例化。直接监听class类，ID的事件进行操作
- **键码值**：例如，数字 48 至 57 分别对应键盘上的数字 0 至 9；`46` 对应删除键（`.`），而 `8` 对应退格键。 ### 2. 输入验证 #### 2.1 正则表达式与逻辑判断 在本例中的 `inputNum(event)` 函数中，我们...
3. **numkeyboard.js**：这是一个自定义的JavaScript文件，实现了数字键盘的功能。它可能包含了用于创建键盘布局、处理按键点击事件以及将输入的数字绑定到关联输入框的函数。这个文件是整个数字键盘插件的核心，...
5. JavaScript交互：为了实现数字键盘的功能，如点击按钮输入数字、清除输入、确认支付等，JavaScript必不可少。这里可能涉及到DOM操作、事件监听、数据绑定和状态管理等技巧。 6. 动画效果：为了让界面更生动，...
本项目“wckeyboard”就是基于Vue.js进行封装的一个自定义数字键盘组件，其目标是模仿大众点评闪惠买单中的价格输入键盘，为用户提供更友好的交互体验。 1. **Vue.js组件化开发**： Vue.js的核心理念之一是组件化...
1. **易于集成**：jQuery虚拟数字键盘插件调用简单，只需要在HTML页面中引入必要的JavaScript和CSS文件，然后通过jQuery选择器对目标输入框应用特定的事件触发键盘显示。 2. **自定义配置**：该插件通常允许开发者...
【数字键盘.rar】是一个压缩包，包含了一个纯JavaScript编写的虚拟数字键盘实现。这个数字键盘设计的目的是为了在网页上提供一个用户友好的输入界面，只允许用户输入数字，从而适用于各种需要数字输入的场景，比如...
在IT行业中，虚拟数字键盘是一种常见且实用...总的来说，虚拟数字键盘的实现涉及到前端开发的多个方面，包括Vue.js框架的应用、用户交互设计以及跨平台兼容性策略。通过深入研究和实践，可以提升前端开发者的技能水平。
项目的压缩包中包含的"key"文件可能是HTML、CSS和JavaScript文件的组合，它们共同构成了数字键盘的实现。HTML文件负责展示键盘的结构，CSS文件负责样式设计，而JavaScript（可能使用jQuery）则负责键盘的功能实现，...
jQuery作为一款广泛使用的JavaScript库，提供了丰富的功能来优化网页交互，其中包括在手机移动端实现点击弹出数字键盘输入的功能。本篇文章将深入探讨这一话题，帮助开发者理解并掌握相关技术。 首先，我们需要了解...
**jQuery虚拟数字键盘** 在网页应用中，有时我们需要为用户提供一个仅限数字输入的界面，例如在填写电话号码、身份证号或密码时。在这种情况下，使用传统的文本输入框可能不够安全或者不够用户友好。为此，我们可以...