【JQuery】虛擬鍵盤

說明：
動態(虛擬)鍵盤機制對於防制網路帳號盜用之有其功效，以達層層保護的安全使用環境。
建議使用在HTTPS環境下使用，目前大部分應用在銀行業（例如台灣銀行、台新銀行等）。

引述：
當銀行業者安全機制同時包含HTTPS及動態鍵盤時，使用客戶假使中了惡意程式（KeyLog），使用者也可將災害降到最低，因為動態鍵盤每次排列皆不相同，keyLog的惡意程式無法記錄到任何有意義的資料，加上HTTPS的加密通道，駭客並無法解析此加密過的資料封包，而達到最佳的安全交易環境。

使用JQuery前,需要引用Jquery元件及keypad元件

HTML 頁面：

<p>鍵盤基本型&nbsp;&nbsp;<input type="text" id="defaultKeypad"></p>
<br /><br /><br /><br /><br />
<p>鍵盤亂數型&nbsp;&nbsp;<input type="text" id="randomKeypad">最後一碼<span id="lastnum"></span>
&nbsp;&nbsp;&nbsp;目前輸入  <span id="current"></span>&nbsp;&nbsp;&nbsp;目前輸入總共<span id="leng"></span>位數</p>
<p>顯示型&nbsp;&nbsp;<input type="Password" id="ShowKeypad"></p>
<span id="inlineKeypad"></span>

Javascript 部份：

$(function () {
 //showOn 屬性出現按鈕
 //randomiseNumeric 亂數產生
 $('#defaultKeypad').keypad();
 $('#randomKeypad').keypad({showOn: 'both', randomiseNumeric: true,
                          onKeypress: function(key, value, inst) {
                                        $('#lastnum').text(key || ' ');     //取最後一碼                                   
                                  $('#current').text(value);  //取數字值
                                  $('#leng').text(value.length);   // 取位數 value.length = $('#randomKeypad').val().length 兩者選一
                                  }
                           }); 
 $('#inlineKeypad').keypad({onClose: useValue, prompt: '',
 closeText: 'Done', closeStatus: 'Use this value'});
  
  function useValue(value) {
 alert('The entered value is ' + value);
 document.getElementById('ShowKeypad').value=value;
    }

});

執行畫面：

參考資源 :

http://keith-wood.name/keypad.html
JQuery Keypad 屬性及方法