<!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>

js 数字键盘的更多相关文章

  1. JS数字键盘

    JS数字键盘,JS小键盘 CSS代码: #numberkeyboard { border: 1px solid #b3b3b3; background: #f2f3f7; height: 285px; ...

  2. js Date 函数方法 和 移动端数字键盘调用

    var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...

  3. js输入密文弹出数字键盘

    我们经常被产品要求,在移动端的web页面上的输入框输入密码时要弹出数字键盘,而不是全键盘,这个该怎么实现呢? 1.首先要弹出数字键盘,我们只能把input框的type从password改为tel 2. ...

  4. js获取键盘按下的键值event.keyCode,event.charCode,event.which的兼容性

    js获取键盘按下的键值有event.keyCode,event.charCode和event.which 其中: 谷歌浏览器对event.keyCode,event.charCode和event.wh ...

  5. js浏览器键盘事件控制(转自新浪微博)

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  6. js 实现键盘记录 兼容FireFox和IE

    这两天突然想弄弄js的键盘记录,所以就小研究了一下. 主要分四个部分 第一部分:浏览器的按键事件 第二部分:兼容浏览器 第三部分:代码实现和优化 第四部分:总结 第一部分:浏览器的按键事件 用js实现 ...

  7. h5仿微信、支付宝数字键盘|微信支付键盘|支付宝付款键盘

    html5仿微信支付数字键盘|仿支付宝键盘|h5仿微信密码输入键盘|自定义数字键盘 很早之前由于项目需求,就有开发过一个h5仿微信支付键盘,这几天就把之前的数字键盘模块独立出来,重新整理开发成demo ...

  8. 基于jQuery的数字键盘插件

    有时,我们需要在网页上使用软键盘.今天,就给大家带来一个基于jQuery的数字键盘插件,除了jQuery,不需要依赖任何文件资源.纯数字键盘,有退格,有清除,不支持输入小数(需要的可以自己改一下,主要 ...

  9. 一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现

    https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技 ...

随机推荐

  1. Eclipse中SVN更改连接用户

    Eclipse中安装了SVN插件,当连接到SVN服务器后,便无法从客户端更改连接帐号 百度一下,也就知道 查看Eclipse中使用的是什么SVN Interface,位置在windows > p ...

  2. Linux-进程间通信（四）: 域套接字

    1. 域套接字: (1) 只能用于同一设备上不同进程之间的通信: (2) 效率高于网络套接字.域套接字仅仅是复制数据,并不走协议栈: (3) 可靠,全双工: 2. 域套接字地址结构: struct s ...

  3. Linux 入门记录：八、Linux 文件系统

    一.文件系统 操作系统通过文件系统管理文件及数据,磁盘或分区需要创建文件系统之后,才能被操作系统所用,创建文件系统的过程又称之为格式化.没有文件系统的设备又称之为裸设备(raw),某些环境会需要裸设备 ...

  4. 浅谈linux的死锁检测 【转】

    转自:http://www.blog.chinaunix.net/uid-25942458-id-3823545.html 死锁:就是多个进程(≥2)因为争夺资源而相互等待的一种现象,若无外力推动,将 ...

  5. aspxpivotgrid排序

    protected virtual void SetSortBySummary() { foreach (PivotGridField field in grid.Fields) { if (fiel ...

  6. [hadoop][会装]HBase集群安装--基于hadoop ha模式

    可以参考部署HBase系统(分布式部署) 和基于无HA模式的hadoop下部署相比,主要是修改hbase-site .xml文件,修改如下参数即可: <property> <name ...

  7. StringBuilder类的作用，以及与String类的相互转换

    # 转载请留言联系 先看一段String类的字符串拼接的代码. String s = "hello" 会在常量池开辟一个内存空间来存储”hello". s += &quo ...

  8. poj-1113

    Wall Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 31419   Accepted: 10619 Descriptio ...

  9. 使用PuTTY连接树莓派

    这是 meelo 原创的 玩转树莓派 系列文章 PuTTY是一个支持Telnet.SSH协议,实现远程登录的软件.树莓派的官方操作系统Raspbian默认开启了SSH协议进行登录,这样即使没有专门的显 ...

  10. AC日记——[HNOI2008]GT考试 bzoj 1009

    1009 思路: KMP上走DP(矩阵加速): DP[i][j]表示当前在第i位,同是匹配到不吉利串的第j位的方案数: 代码: #include <bits/stdc++.h> using ...