说到软键盘，大家可能会想到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('`','`'));
本内容试读结束，登录后可阅读更多
下载后可阅读完整内容，剩余2页未读，立即下载
