没有合适的资源?快使用搜索试试~ 我知道了~
JS 网页动态键盘
5星 · 超过95%的资源 需积分: 9 11 下载量 47 浏览量
2011-11-15
15:34:04
上传
评论
收藏 3KB TXT 举报
温馨提示
试读
3页
JS 网页动态键盘 让网民更便捷的输入 体验完美 !
资源推荐
资源详情
资源评论
说到软键盘,大家可能会想到window自带的屏幕键盘以及银行支付窗口的数字键盘,但是window的屏幕键盘点击某键后并不会自动刷新键盘的位置,本文介绍的网页动态键盘,当点击某键时,键盘的内容会随机刷新,这样就可以保证大家输入的安全性。
如下图所示:在线演示
下面我们看如何制作,由于我并不常用这样的键盘,所以也只是随便的写写(部分采用jquery框架,因为jq选择对象很方便),如果大家需要添加键盘,可以直接修改keys这个数组,本文主要提供思路,大家可以参考并写出更完美的键盘。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body,ul,li{padding:0px; margin:0px; list-style:none; font-size:12px;}
body{padding:20px;}
.cls{clear:both; height:0px; line-height:0px; overflow:hidden; display:block;}
#kb_wrap{position:absolute; width:345px; border:1px solid #000; background:#333;}
#kb_list{padding:6px; color:#CCC;}
#kb_list li{cursor:pointer; display:block; float:left; margin:1px;}
#kb_list li a{width:18px; text-align:center; display:block; height:18px; line-height:18px; overflow:hidden; border:1px solid #666;}
#kb_list li a:hover{border:1px solid #FFF; color:#FFF;}
</style>
<title>网页键盘</title>
</head>
<body>
<input />
</body>
</html>
<script src="jquery.js"></script>
<script>
//定义键盘
var keys=new Array(new Array('1','1'),new Array('2','2'),new Array('3','3'),new Array('4','4'),new Array('5','5'),new Array('6','6'),new Array('7','7'),new Array('8','8'),new Array('9','9'),new Array('0','0'),new Array('a','a'),new Array('b','b'),new Array('c','c'),new Array('d','d'),new Array('e','e'),new Array('f','f'),new Array('g','g'),new Array('h','h'),new Array('i','i'),new Array('j','j'),new Array('k','k'),new Array('l','l'),new Array('m','m'),new Array('n','n'),new Array('o','o'),new Array('p','p'),new Array('q','q'),new Array('r','r'),new Array('s','s'),new Array('t','t'),new Array('u','u'),new Array('v','v'),new Array('w','w'),new Array('x','x'),new Array('y','y'),new Array('z','z'),new Array(';',';'),new Array('[',']'),new Array(',',','),new Array('.','.'),new Array('/','/'),new Array('+','+'),new Array('-','-'),new Array('*','*'),new Array('`','`'));
如下图所示:在线演示
下面我们看如何制作,由于我并不常用这样的键盘,所以也只是随便的写写(部分采用jquery框架,因为jq选择对象很方便),如果大家需要添加键盘,可以直接修改keys这个数组,本文主要提供思路,大家可以参考并写出更完美的键盘。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body,ul,li{padding:0px; margin:0px; list-style:none; font-size:12px;}
body{padding:20px;}
.cls{clear:both; height:0px; line-height:0px; overflow:hidden; display:block;}
#kb_wrap{position:absolute; width:345px; border:1px solid #000; background:#333;}
#kb_list{padding:6px; color:#CCC;}
#kb_list li{cursor:pointer; display:block; float:left; margin:1px;}
#kb_list li a{width:18px; text-align:center; display:block; height:18px; line-height:18px; overflow:hidden; border:1px solid #666;}
#kb_list li a:hover{border:1px solid #FFF; color:#FFF;}
</style>
<title>网页键盘</title>
</head>
<body>
<input />
</body>
</html>
<script src="jquery.js"></script>
<script>
//定义键盘
var keys=new Array(new Array('1','1'),new Array('2','2'),new Array('3','3'),new Array('4','4'),new Array('5','5'),new Array('6','6'),new Array('7','7'),new Array('8','8'),new Array('9','9'),new Array('0','0'),new Array('a','a'),new Array('b','b'),new Array('c','c'),new Array('d','d'),new Array('e','e'),new Array('f','f'),new Array('g','g'),new Array('h','h'),new Array('i','i'),new Array('j','j'),new Array('k','k'),new Array('l','l'),new Array('m','m'),new Array('n','n'),new Array('o','o'),new Array('p','p'),new Array('q','q'),new Array('r','r'),new Array('s','s'),new Array('t','t'),new Array('u','u'),new Array('v','v'),new Array('w','w'),new Array('x','x'),new Array('y','y'),new Array('z','z'),new Array(';',';'),new Array('[',']'),new Array(',',','),new Array('.','.'),new Array('/','/'),new Array('+','+'),new Array('-','-'),new Array('*','*'),new Array('`','`'));
资源评论
- D_in2013-01-13谢谢啦,参考一下做了课程设计
- candydyn2013-01-12可惜不是动态的啊。。
sovl
- 粉丝: 0
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功