安道生練功房 - 分享經驗，累積智慧

bious3927

下面介紹jQuery Keypad的使用 (網站：http://keith-wood.name/keypad.html)，範例畫面如附件圖1

【範例】
Step 1：至http://keith-wood.name/keypad.html下載整包套件，主要使用到的檔案有以下幾個：

jquery.plugin.js

jquery.keypad.js

jquery.keypad.alt.css

keypad.png

Step2：編輯html，新增二個文字輸入方塊，帳號及密碼

<!DOCTYPE html>

<html>

<body>

<p><input type="text" id="accKeypad"></p>

<p><input type="password" id="pwdKeypad"></p>

</body>

</html>

Step 3：將jquery.keypad.alt.css、jquery.plugin.js、jquery.keypad.js加入至html中，另外需加入google api提供的jquery.min.js。(PS.如果網站為https，則需將google api網址也改為https)

<link rel="stylesheet" href="jquery.keypad.alt.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="jquery.plugin.js"></script>

<script src="jquery.keypad.js"></script>

Step 4：在html中編輯javascript

<script>

$(function () {

  $('#accKeypad,#pwdKeypad').keypad({keypadOnly: false, 

    randomiseOther: true, randomiseNumeric: true, randomiseAlphabetic: true, randomiseOther: true,

    showOn: 'button', buttonImageOnly: true, buttonImage: 'keypad.png', showAnim: '',

    layout: $.keypad.qwertyLayout});           

});

</script>

註1：如果想要使每次鍵盤上的文字位置不同，除上述方式外(randomiseOther: true, randomiseNumeric: true, randomiseAlphabetic: true, randomiseOther: true)，也可改用 randomiseAll: true，但數字鍵就不會固定在右方區塊。
註2：「showOn: 'button', buttonImageOnly: true, buttonImage: 'keypad.png'」：點選鍵盤圖示才顯示動態鍵盤，若想改為當游標出現在輸入框時也顯示，則改成「showOn: 'both', buttonImage: 'keypad.png'」。
註3：「showAnim: ''」：指鍵盤顯示時不使用特效。

Step 5：如想更換鍵盤外觀，可使用google api提供的主題，先加入以下css，以smoothness為例

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css">

其他主題可參考jQuery keypad網站之Styling頁籤中，「ThemeRoller styling:」的地方，將上面css網址改為其他名稱即可，例如欲改為blitzer，則修改成下面的路徑：

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/blitzer/jquery-ui.css

再加入以下參數至.keypad()中，結果如附件圖2

useThemeRoller: true

完整html如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>jQuery Keypad</title>

<link rel="stylesheet" href="jquery.keypad.alt.css">

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css">



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="jquery.plugin.js"></script>

<script src="jquery.keypad.js"></script>

<script>

$(function () {

  $('#accKeypad,#pwdKeypad').keypad({useThemeRoller: true, keypadOnly: false, 

    randomiseOther: true, randomiseNumeric: true, randomiseAlphabetic: true, randomiseOther: true,

    showOn: 'button', buttonImageOnly: true, buttonImage: 'keypad.png', showAnim: '',

    layout: $.keypad.qwertyLayout});           

});

</script>

</head>

<body>

<p><input type="text" id="accKeypad"></p>

<p><input type="password" id="pwdKeypad"></p>

</body>

</html>

安道生練功房 - 分享經驗，累積智慧

練功房推薦書單