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