JavaScript_jquery網頁動態鍵盤
|
admin
2010年8月14日 2:19
本文熱度 4520
|
說到軟鍵盤，大家可能會想到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
