JavaScript_jquery网页动态键盘
|
admin
2010年8月14日 2:19
本文热度 3985
|
说到软键盘，大家可能会想到window自带的屏幕键盘以及银行支付窗口的数字键盘，但是window的屏幕键盘点击某键后并不会自动刷新键盘的位置，本文介绍的网页动态键盘，当点击某键时，键盘的内容会随机刷新，这样就可以保证大家输入的安全性。 如下图所示： 在线演示5b7384887975cddd5993559dd80f3196.gif) 下面我们看如何制作，由于我并不常用这样的键盘，所以也只是随便的写写(部分采用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; }
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 type="text" id="nw" />
</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('`','`'));
$(function(){ //jquery页面载入成功后自动执行
$('#nw').click(function(){ //注册文本框的点击事件
keyboard_show(); //点击文本框时执行keyboard_show()方法，将会打开网页键盘
});
});
</script>
<script>
var wrap=null;
function keyboard_show(){ //创建键盘，并显示出来
if(!wrap){
wrap=document.createElement('div');
wrap.id='kb_wrap';
document.body.appendChild(wrap);
}
var v='<ul id="kb_list">';
var sk=rnds(keys.length); //创建一个随机的数组，用来将键盘打乱，产生随机效果
for(var i=0; i<keys.length; i++)
v+='<li title="'+keys[sk[i]][1]+'"><a onclick="keyboard_sendData(\''+keys[sk[i]][0]+'\');">'+keys[sk[i]][0]+'</a></li>';
v+='<br class="cls" /></ul>';
$(wrap).html(v);
}
function rnds(l){ //随机函数，返回数组，参数l为长度
var arr=new Array();
var arrs=new Array();
function compare(a1,a2){
return a1[1]-a2[1];
}
for(var i=0; i<l; i++) arr[i]=[i,Math.random()];
arr.sort(compare);
for(var i=0; i<arr.length; i++) arrs[i]=arr[i][0];
return arrs;
}
function keyboard_sendData(s){ //点击键盘时将值放入文本框中，本文只是将值放到文本框最后，大家可以判断selectRange，将值放到合适的位置
$('#nw').val($('#nw').val()+s);
keyboard_show(); //再次创建键盘，这样键盘的位置会发生变化
}
</script> 在线演示
该文章在 2010/8/14 2:19:41 编辑过
|
|
400 186 1886
