js 数字键盘
<!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 数字键盘的更多相关文章
- JS数字键盘
JS数字键盘,JS小键盘 CSS代码: #numberkeyboard { border: 1px solid #b3b3b3; background: #f2f3f7; height: 285px; ...
- js Date 函数方法 和 移动端数字键盘调用
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...
- js输入密文弹出数字键盘
我们经常被产品要求,在移动端的web页面上的输入框输入密码时要弹出数字键盘,而不是全键盘,这个该怎么实现呢? 1.首先要弹出数字键盘,我们只能把input框的type从password改为tel 2. ...
- js获取键盘按下的键值event.keyCode,event.charCode,event.which的兼容性
js获取键盘按下的键值有event.keyCode,event.charCode和event.which 其中: 谷歌浏览器对event.keyCode,event.charCode和event.wh ...
- js浏览器键盘事件控制(转自新浪微博)
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
- js 实现键盘记录 兼容FireFox和IE
这两天突然想弄弄js的键盘记录,所以就小研究了一下. 主要分四个部分 第一部分:浏览器的按键事件 第二部分:兼容浏览器 第三部分:代码实现和优化 第四部分:总结 第一部分:浏览器的按键事件 用js实现 ...
- h5仿微信、支付宝数字键盘|微信支付键盘|支付宝付款键盘
html5仿微信支付数字键盘|仿支付宝键盘|h5仿微信密码输入键盘|自定义数字键盘 很早之前由于项目需求,就有开发过一个h5仿微信支付键盘,这几天就把之前的数字键盘模块独立出来,重新整理开发成demo ...
- 基于jQuery的数字键盘插件
有时,我们需要在网页上使用软键盘.今天,就给大家带来一个基于jQuery的数字键盘插件,除了jQuery,不需要依赖任何文件资源.纯数字键盘,有退格,有清除,不支持输入小数(需要的可以自己改一下,主要 ...
- 一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现
https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技 ...
随机推荐
- 转 一次完整地http请求
作者:斯巴达克斯 时间:January 11, 2014 分类:WEB 声明:本文章中的说法仅是个人理解总结,不一定完全正确,但是可以有助于理解. 关于HTTP协议可以参考以下: HTTP协议漫谈 h ...
- ctsc&apio2018八日游
day0: 早就知道自己是打酱油的..早就做好了打铁的准备.. Q:那你来干嘛 A:当然是来玩啊!!玩啊!啊!! emmmmm 抱着半期考不及格的卷子瑟瑟发抖地上了飞机. day1:报道!当然还有在宾 ...
- Java基础 变量和数据类型及相关操作
Java基本语法: 1):Java语言严格区分大小写,好比main和Main是完全不同的概念. 2):一个Java源文件里可以定义多个Java类,但其中最多只能有一个类被定义成public类.若源文件 ...
- C语言将字符串转换成对应的数字(十进制、十六进制)【转】
转自:http://wawlian.iteye.com/blog/1315133 问题1:讲一个十进制数字的字符串表示转换成对应的整数.举例:将“”转换成整数1234. C代码 收藏代码 /*将字符串 ...
- java实现数据库分页
/*** * 工具类 * @param pageIndex //页码 * @param pageSize//每页数据的条数 * @param rowCount//总的数据条数 * @return */ ...
- 数据库简述(以MySQL为例)
一.数据库中的概念 1.数据库是用户存放数据.访问数据.操作数据的存储仓库,用户的各种数据被有组织地存放在数据库中.可以随时被有权限的用户查询.统计.添加.删除和修改.可以说,数据库是长期存储在计算机 ...
- 关于那些Android中不常用的设置属性
很多在manifest中的属性我们经常遗忘了它们,或者经常看到但又不是很明白它的作用.那么在这里我就拿了一些属性简单的解释一下,防止以后碰到却不知道其中的意思.不是很全,以后会断断续续的补充吧 一.a ...
- Mui自定义时间格式:
Mui自定义时间格式: (function($) { $.init(); $(document).on('tap','.btn',function(){ var obj = getFormJson($ ...
- java获取项目路径,url路径
我的web项目名iamgeModel. 工作空间在D盘 先获取url相关: 需要是HttpServletRequest request; 获取IP: request.getServerName() / ...
- yum 安装 jdk
https://www.cnblogs.com/kevingrace/p/5870814.html yum -y list java* 以yum库中java-1.7.0为例注:“*”表示将java-1 ...