比較注重資安的網站，為了避免使用者被植入木馬紀錄鍵盤輸入的紀錄，
所以產生動態鍵盤這個東西，像是下圖所示
這個可以讓使用者用滑鼠去點，不用透過鍵盤，然後每一個按鈕每一次的值都不一樣，
所以叫做動態鍵盤．
首先設定好要有的字元，也準備一個List<string>來存放每次亂數編排後的結果，
跑一個迴圈長度就是剛剛設定要有的字元，然後用亂數（要夠亂）去取單一字元( substring )，
丟到要存放結果的List<string>，當然要存放前要先檢查這個 List 裡面有沒有重複的字元．
1: string KBChars = "1234567890abcdefghijklmnopqrstuvwxyz";
2: List<string> RandomList = new List<string>();
3: 4: for (int i = 0; i <= KBChars.Length - 1; i++)
5: {6: do{
7: Random rand = new Random(Guid.NewGuid().GetHashCode());
8: int c = rand.Next(0, KBChars.Length);
9: string x = KBChars.Substring(c, 1);
10: } while (RandomList.Contains(x));
11: 12: RandomList.Add(x); 13: }這邊的一個小技巧就是亂樹給的種子數使用 Guid.NewGuid()
用這樣的方法會比用時間來當種子數好很多，因為變化大，
時間變化就是幾個數字在變，GUID是一堆字元在變化，
對這個需求來講已經夠亂了～
for loop 迴圈固定了 List<string> 的長度，
do while 迴圈在檢查目前亂數抓到的字元是不是已經被塞到 List 裡面了，
這樣就有一個亂數的List<string>可以用了．
然後就是套版，這比較辛苦一點，設計切板來是怎樣就乖乖地放，舉例像這樣
1: <div class="key short"><p><span><i class="btn-s">@RandomList[0]</i></span></p></div>
2: <div class="key short"><p><span><i class="btn-s">@RandomList[1]</i></span></p></div>
3: <div class="key short"><p><span><i class="btn-s">@RandomList[2]</i></span></p></div>
4: <div class="key short"><p><span><i class="btn-s">@RandomList[3]</i></span></p></div>
很固定的就是排0 1 2 3 這樣，因為在剛剛做出來的 RandomList 已經是亂數了，
這邊就不需要再去亂排．
接下來就是使用jQuery來作業了．
假設使用者開啟動態鍵盤，要在密碼欄位輸入，
1: var target = $('#password');
2: 3: $('body').on('click', '.btn-s', function () {
4: 5: var c = $.trim($(this).html()); 6: 7: target.val(target.val() + c); 8: 9: });剛剛那些按鈕共用的 css class name 是 btn-s，將他綁定 click 事件，
設定好目的欄位，然後看哪一個被觸發，就把值累加到目的欄位，
如果有大小寫呢？只要對每個 btn-s 輪巡一下是大寫還是小寫，相反他即可．
1: $('body').on('click', '#shift', function () {
2: 3: $('.btn-s').each(function (index) {
4: 5: var c = $.trim($(this).html()); 6: 7: if (c == c.toUpperCase())
8: { 9: $(this).html(c.toLowerCase()); 10: } 11: else
12: { 13: $(this).html(c.toUpperCase()); 14: } 15: }); 16: });其他像是清除或是往回刪除這都是簡單的字串操作，可以自己試試看．
而 target 在多欄位都要用到動態鍵盤時，就得是全域變數，
每當哪個輸入框觸發 focus 時 把target 換到此就可以了．
例如
1: $('#id').focus(function () {
2: target = $(this); 3: });這樣就是一個動態鍵盤囉，不過老實說，密碼如果設定的要有數字大小寫，
真的操作起來還蠻盧的，更盧的是，有時候眼睛瞎了會找不到哪個字在哪裡ＸＤ
留言列表
