常常看到某些網頁會使用虛擬鍵盤來輸入一些預防被竊取的資料,

剛好目前有用到,就上來記錄一下使用方式,

首先去JQuery下載jquery-1.3.2.jsp

接下來去Jquery-keypad下載虛擬鍵盤的檔案

最後將以上檔案放置到你的project內,如下圖:

jquery02.jpg

開啟keypadBasics.html檔案,進入到程式頁面,

添加以下程式碼:

<style type="text/css">@import "css/jquery.keypad.css";</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.keypad.js"></script>
<script type="text/javascript">
$(function () {
    $('#defaultKeypad').keypad();
});
</script>

註:$('#defaultKeypad').keypad(); 之defaultKeypad必須跟input Button的ID一樣

 

執行之後畫面就會如下圖:

jquery01.jpg

接下來稍微說明一下用法,

<script type="text/javascript">
    $(function () {
         .....
         撰寫事件
         .....

    });
</script>

事件都需寫在function內,如以下範例:

<script type="text/javascript">
$(function () {
   $('#alphaKeypad').keypad({keypadOnly: false, layout: [
        '1234567890' + $.keypad.CLOSE,
        'abcdefghij' + $.keypad.CLEAR,
        'klmnopqrst' + $.keypad.BACK,
        'uvwxyz@_-.' + $.keypad.SHIFT
    ]});
});
</script>

<BODY>

<asp:TextBox ID="alphaKeypad" runat="server"></asp:TextBox>

</BODY>

要顯示的鍵盤按鍵使用單引號(')包住按鍵內容,如上方 '1234567890'

而其它按鍵說明如下:

$.keypad.CLOSE (關閉鍵盤)
$.keypad.CLEAR (清除textbox以輸入的值)
$.keypad.BACK (刪除前一位輸入之字元)
$.keypad.SHIFT (大小寫切換)
$.keypad.SPACE_BAR (空白鍵)
$.keypad.SPACE (全型空格)
$.keypad.HALF_SPACE (半型空格)

這些按鍵使用+號串連即可,

最後執行後顯示的畫面如下圖:

jquery03.jpg

我這只是舉例一種來說明,要看詳細說明請參考官方文件。

創作者介紹

蛤什麼蛤?

joysdw12 發表在 痞客邦 PIXNET 留言(0) 人氣()