JavaScript_jquery網(wǎng)頁(yè)動(dòng)態(tài)鍵盤(pán)
|
admin
2010年8月14日 2:19
本文熱度 4547
|
說(shuō)到軟鍵盤(pán)，大家可能會(huì)想到window自帶的屏幕鍵盤(pán)以及銀行支付窗口的數(shù)字鍵盤(pán)，但是window的屏幕鍵盤(pán)點(diǎn)擊某鍵后并不會(huì)自動(dòng)刷新鍵盤(pán)的位置，本文介紹的網(wǎng)頁(yè)動(dòng)態(tài)鍵盤(pán)，當(dāng)點(diǎn)擊某鍵時(shí)，鍵盤(pán)的內(nèi)容會(huì)隨機(jī)刷新，這樣就可以保證大家輸入的安全性。 如下圖所示： 在線演示5b7384887975cddd5993559dd80f3196.gif) 下面我們看如何制作，由于我并不常用這樣的鍵盤(pán)，所以也只是隨便的寫(xiě)寫(xiě)(部分采用jquery框架，因?yàn)閖q選擇對(duì)象很方便)，如果大家需要添加鍵盤(pán)，可以直接修改keys這個(gè)數(shù)組，本文主要提供思路，大家可以參考并寫(xiě)出更完美的鍵盤(pán)。 <!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>網(wǎng)頁(yè)鍵盤(pán)</title>
</head>
<body>
<input type="text" id="nw" />
</body>
</html>
<script src="jquery.js"></script>
<script>
//定義鍵盤(pán)
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頁(yè)面載入成功后自動(dòng)執(zhí)行
$('#nw').click(function(){ //注冊(cè)文本框的點(diǎn)擊事件
keyboard_show(); //點(diǎn)擊文本框時(shí)執(zhí)行keyboard_show()方法，將會(huì)打開(kāi)網(wǎng)頁(yè)鍵盤(pán)
});
});
</script>
<script>
var wrap=null;
function keyboard_show(){ //創(chuàng)建鍵盤(pán)，并顯示出來(lái)
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); //創(chuàng)建一個(gè)隨機(jī)的數(shù)組，用來(lái)將鍵盤(pán)打亂，產(chǎn)生隨機(jī)效果
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){ //隨機(jī)函數(shù)，返回?cái)?shù)組，參數(shù)l為長(zhǎng)度
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){ //點(diǎn)擊鍵盤(pán)時(shí)將值放入文本框中，本文只是將值放到文本框最后，大家可以判斷selectRange，將值放到合適的位置
$('#nw').val($('#nw').val()+s);
keyboard_show(); //再次創(chuàng)建鍵盤(pán)，這樣鍵盤(pán)的位置會(huì)發(fā)生變化
}
</script> 在線演示
該文章在 2010/8/14 2:19:41 編輯過(guò)
|
|
400 186 1886
