常常看到某些網頁會使用虛擬鍵盤來輸入一些預防被竊取的資料，
剛好目前有用到，就上來記錄一下使用方式，
首先去JQuery下載jquery-1.3.2.jsp
接下來去Jquery-keypad下載虛擬鍵盤的檔案
最後將以上檔案放置到你的project內，如下圖:
開啟keypadBasics.html檔案，進入到程式頁面，
添加以下程式碼:
1: <style type="text/css">@import "css/jquery.keypad.css";</style>
2: <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
3: <script type="text/javascript" src="js/jquery.keypad.js"></script>
4: <script type="text/javascript">$(function () { $('#defaultKeypad').keypad();});</script>
註:$('#defaultKeypad').keypad(); 之defaultKeypad必須跟input Button的ID一樣
執行之後畫面就會如下圖:
接下來稍微說明一下用法，
1: <script type="text/javascript">
2: $(function (){
3: 撰寫事件...
4: });
5: </script>
事件都需寫在function內，如以下範例:
1: <script type="text/javascript">
1:
2: $(function () {
3: $('#alphaKeypad').keypad({ keypadOnly: false, layout: [
4: '1234567890' + $.keypad.CLOSE,
5: 'abcdefghij' + $.keypad.CLEAR,
6: 'klmnopqrst' + $.keypad.BACK,
7: 'uvwxyz@_-.' + $.keypad.SHIFT
8: ]});
9: });
</
script
>
2: <BODY>
3: <asp:TextBox ID="alphaKeypad" runat="server"></asp:TextBox>
4: </BODY>
要顯示的鍵盤按鍵使用單引號(')包住按鍵內容，如上方 '1234567890'
而其它按鍵說明如下:
$.keypad.CLOSE (關閉鍵盤)
$.keypad.CLEAR (清除textbox以輸入的值)
$.keypad.BACK (刪除前一位輸入之字元)
$.keypad.SHIFT (大小寫切換)
$.keypad.SPACE_BAR (空白鍵)
$.keypad.SPACE (全型空格)
$.keypad.HALF_SPACE (半型空格)
這些按鍵使用+號串連即可，
最後執行後顯示的畫面如下圖:
我這只是舉例一種來說明，要看詳細說明請參考官方文件。
参数说明：
buttonText: ‘…’, // Display text for trigger button
buttonStatus: ‘Open the keypad’, // Status text for trigger button
closeText: ‘Close’, // Display text for close link
closeStatus: ‘Close the panel’, // Status text for close link
clearText: ‘Clear’, // Display text for clear link
clearStatus: ‘Erase the current entry’, // Status text for clear link
backText: ‘Back’, // Display text for back link
backStatus: ‘Erase the previous character’, // Status text for back link
enterText: ‘Enter’, // Display text for carriage return
enterStatus: ‘Carriage return’, // Status text for carriage return
tabText: ‘Tab’, // Display text for tab
tabStatus: ‘Horizontal tab’, // Status text for tab
shiftText: ‘Shift’, // Display text for shift link
shiftStatus: ‘Toggle upper/lower case characters’, // Status text for shift link
alphabeticLayout: this.qwertyAlphabetic, // Default layout for alphabetic characters
fullLayout: this.qwertyLayout, // Default layout for full keyboard
isAlphabetic: this.isAlphabetic, // Function to determine if character is alphabetic
isNumeric: this.isNumeric, // Function to determine if character is numeric
isRTL: false, // True if right-to-left language, false if left-to-right
showOn: ‘focus’, // ‘focus’ for popup on focus,
// ‘button’ for trigger button, or ‘both’ for either
buttonImage: ”, // URL for trigger button image
buttonImageOnly: false, // True if the image appears alone, false if it appears on a button
showAnim: ‘show’, // Name of jQuery animation for popup
showOptions: {}, // Options for enhanced animations
duration: ‘normal’, // Duration of display/closure
appendText: ”, // Display text following the input box, e.g. showing the format
useThemeRoller: false, // True to add ThemeRoller classes
keypadClass: ”, // Additional CSS class for the keypad for an instance
prompt: ”, // Display text at the top of the keypad
layout: ['123' + this.CLOSE, '456' + this.CLEAR,
'789' + this.BACK, this.SPACE + '0'], // Layout of keys
separator: ”, // Separator character between keys
target: null, // Input target for an inline keypad
keypadOnly: true, // True for entry only via the keypad, false for keyboard too
randomiseAlphabetic: false, // True to randomise the alphabetic key positions, false to keep in order
randomiseNumeric: false, // True to randomise the numeric key positions, false to keep in order
randomiseOther: false, // True to randomise the other key positions, false to keep in order
randomiseAll: false, // True to randomise all key positions, false to keep in order
beforeShow: null, // Callback before showing the keypad
onKeypress: null, // Define a callback function when a key is selected
onClose: null // Define a callback function when the panel is closed
2087
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
