螢幕鍵盤
螢幕鍵盤也稱虛擬鍵盤，是一種非常實用的工具，可以讓那些有移動障礙的使用者用指標裝置或遊戲杆輸入資料。它旨在為那些有移動障礙的使用者提供最低階別的功能。
螢幕鍵盤在網路生活中很常見，比如使用網銀或線上查詢信用卡餘額，在輸入密碼等敏感資料時，應該就會用到螢幕鍵盤。以防止被木馬或惡意程式捕獲盜取實際鍵盤上的操作。
今天要推薦一個 Jeremy Satterfield 寫的jQuery螢幕鍵盤外掛，它包括多種按鍵佈局，完全支援自定義，可以更改按鍵佈局和配色方案。它就像Windows的輔助鍵盤，可用來提高網站的可用性。
如何使用
1. 下載該外掛（Github下載）；
2. 以demo.js檔案為基礎，來建立你的鍵盤；
3. 調整鍵盤佈局的設定（程式碼見下文）
4. 定製CSS程式碼，以適應你的網站
jQuery 程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(document).ready(function(){ // standard keyboard layout 標準鍵盤佈局 $('.qwerty').keyboard({ layout: 'qwerty' }); //control for num keys $('#num').keyboard({ layout: 'num', restrictInput : true, // Prevent keys not in the displayed keyboard from being typed in preventPaste : true, // 阻止 Ctr-V 和右擊 prevent ctrl-v and right click autoAccept : true }); }); |
|
1 2 3 4 5 6 7 8 |
//code to setup // Extension demos $(function() { // Set up typing simulator extension on all keyboards $('.ui-keyboard-input').addTyping(); }); |
如何從一個簡單的超連結中載入鍵盤
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// *** Hidden input example 隱藏輸入文字的例子 （見示例網頁中的最後一個） *** // click on a link - add focus to hidden input $('.hiddenInput').click(function(){ $('#hidden').trigger('focus'); return false; }); // 初始化鍵盤指令碼，隱藏輸入Initialize keyboard script on hidden input // set "position.of" to the same link as above $('#hidden').keyboard({ layout: 'qwerty', position : { of : $('.hiddenInput'), my : 'center top', at : 'center top' } }); |
英文：http://www.jquery4u.com/plugins/jquery-screen-keyboard-plugin/