打造個性化的功能強(qiáng)大的Jquery虛擬鍵盤(VirtualKeyboard)
最近做項目，我負(fù)責(zé)做網(wǎng)頁前端，客戶需要利用觸摸屏進(jìn)行操作，不外接鼠標(biāo)鍵盤，但要求能錄入文字，包括數(shù)字，英文，中文。思考了一下，決定用JS實現(xiàn)虛擬鍵盤。
首先上網(wǎng)搜索了一下JS虛擬鍵盤，在經(jīng)過仔細(xì)篩選后，相中了VirtualKeyboard，一款功能強(qiáng)大的JS虛擬鍵盤插件。
先簡單介紹一下VirtualKeyboard，它內(nèi)置了100多種鍵盤布局和200多種輸入法，9套可選皮膚方案，而且支持自建輸入法，功能相當(dāng)強(qiáng)大。
先附上下載地址，目前的最新版本3.94：http://www.corallosoftware.it/Download/download.html 本教程使用的是3.71就不單獨提供下載了，有需要的朋友可以下載我修改完畢的，在文章的最后
下載下來先查看它的演示文檔，依次打開Jsvk\jscripts\demo_inline.html，看到虛擬鍵盤做的還是蠻漂亮的，而且支持中文拼音輸入，完全符合預(yù)期。如下圖所示：
集成到項目中去，說干就干！
首先將Jsvk\jscripts目錄下的文件復(fù)制到項目中去，文本文件和html演示文件可以刪掉。
項目頁面中引用JS文件：
<script type="text/javascript" src="jscripts/vk_loader.js?vk_layout=CN%20Chinese%20Simpl.%20Pinyin&vk_skin=flat_gray" ></script>
解釋一下：vk_layout=CN%20Chinese%20Simpl.%20Pinyin 表示默認(rèn)輸入法設(shè)置為簡體中文，
vk_skin=flat_gray 表示默認(rèn)皮膚選用flat_gray。這兩個可以根據(jù)個人需要進(jìn)行設(shè)置。
調(diào)用/隱藏虛擬鍵盤的函數(shù)：
VirtualKeyboard.toggle("txt_Search", "softkey");
txt_Search是文本框的ID,softkey是虛擬鍵盤顯示位置元素的ID。
下面是個簡單的例子：
<html>
<head>
<script type="text/javascript" src="vk_loader.js?vk_layout=CN%20Chinese%20Simpl.%20Pinyin&vk_skin=flat_gray" ></script>
</head>
<body>
<input type="text" id="txt_Search" onfocus="VirtualKeyboard.toggle('txt_Search', 'softkey')" onblur="VirtualKeyboard.toggle('txt_Search','softkey');" />
<div id="softkey"></div>
</body>
</html>
效果：
一步一步定制自己需要的功能
基本功能實現(xiàn)了，接下來就是中英文切換。先點擊CapsLock切換到大寫試試，結(jié)果失望了，中文狀態(tài)下切換到大寫輸入的依然是中文。只能點擊右下角的輸入法選擇菜單，找到US，切換到英文輸入法。這可不行，每次都要在上百個選項里來回切換，用戶體驗得有多差??！
于是，我有了初步想法，清空下拉列表，手動構(gòu)建一個只有中文和英文選項的列表。要清空下拉列表，首先要知道它的ID，這種層一般都是動態(tài)創(chuàng)建的，于是找到Jsvk\jscripts\virtualkeyboard.js,打開一看，不出所料，代碼是壓縮過以后的，能直接讀懂的都是神人。于是要先對它進(jìn)行解壓。打開http://jsbeautifier.org/，將JS文件中的代碼復(fù)制到輸入框中，點擊一下按鈕，解壓完成。ctrl+a,ctrl+c復(fù)制到新的JS文件中，OK，可以閱讀了。搜索”<select“關(guān)鍵字，一下子就找到了，代碼如下：
"<select id=\"kb_langselector\"></select>" + "<select id=\"kb_mappingselector\"></select>"
kb_mappingselector是鍵盤布局選擇框的ID，kb_langselector是輸入法選擇框的ID，kb_langselector就是我們要的ID。
有了ID，就可以修改了，因為是動態(tài)創(chuàng)建的，只有當(dāng)創(chuàng)建完成以后才可以取到它的ID，于是我把代碼寫到了虛擬鍵盤加載之后。
以下代碼用到了JQuery框架，需要先引用JQuery方可正常使用。
function test(){
$("#kb_langselector").empty().append("<option value='US US'>英文</option><option value='CN Chinese Simpl. Pinyin'>中文</option>").change(function (){
VirtualKeyboard.switchLayout(this.value);return false;
});
}
測試一下發(fā)現(xiàn)了問題，載入停在了10%，頁面提示JS錯誤。
通過錯誤描述大概猜到是我構(gòu)建的option有問題，但具體問題出在哪我?guī)捉?jīng)跟蹤調(diào)試也沒找到，如果哪位大俠找到錯誤還望不吝賜教！
遇到錯誤久攻不下，轉(zhuǎn)變思路吧！
初步設(shè)想失敗了，于是我轉(zhuǎn)變思路，既然我構(gòu)建的有問題，那好，我不構(gòu)建了，你自己構(gòu)建，但多余的我不需要。
按照這個思路，我重新研究加載代碼，發(fā)現(xiàn)輸入法加載的JS是在Jsvk\jscripts\layouts\layouts.js中定義的。于是果斷刪除多余的選項，只留下了Chinese Simpl. Pinyin和US兩個選項。改完后的效果圖如下，只有中文和英文兩個選項，清爽多了。
這還不是我想要的！
中英文切換實現(xiàn)了，但操作還不夠便捷，我需要的是一鍵切換，為什么不在鍵盤中增加一個切換鍵呢？
首先找到皮膚文件，\Jsvk\jscripts\css\flat_gray\button_set.png,我要自己動手加個按鍵！
原圖：
修改后：
只改圖片肯定不夠，按鈕定位在樣式表里，繼續(xù)修改樣式表！在樣式表\Jsvk\jscripts\css\flat_gray\keyboard.css最后加入下面的代碼。
#kbDesk div#kb_binput_method {
float: right;
width: 102px;
}
#kbDesk div#kb_binput_method a {
background-position: -453px 0px;
}
#kbDesk div#kb_binput_method.kbButtonHover a {
background-position: -453px -38px;
}
#kbDesk div#kb_binput_method.kbButtonDown a {
background-position: -453px -76px;
}
接下來要在JS文件中給按鈕定義事件。打開virtualkeyboard.js，找到
var C = {
14: 'backspace',
15: 'tab',
28: 'enter',
29: 'caps',
41: 'shift_left',
52: 'shift_right',
53: 'del',
54: 'ctrl_left',
55: 'alt_left',
56: 'space',
57: 'alt_right',
58: 'ctrl_right'
};
在下面加上59: 'input_method'，記得在'ctrl_right'后面加上逗號。修改后：
var C = {
14: 'backspace',
15: 'tab',
28: 'enter',
29: 'caps',
41: 'shift_left',
52: 'shift_right',
53: 'del',
54: 'ctrl_left',
55: 'alt_left',
56: 'space',
57: 'alt_right',
58: 'ctrl_right',
59: 'input_method'
};
繼續(xù)找到按鈕點擊響應(yīng)代碼：
var d = function (i) {
var e = DOM.getParent(i.srcElement || i.target, 'a');
if (!e || e.parentNode.id.indexOf(Q) < 0) return;
e = e.parentNode;
var iI = X;
var il = e.id.substring(Q.length);
switch (il) {
case "caps":
iI = iI ^ s;
break;
case "shift_left":
case "shift_right":
if (i.shiftKey) break;
iI = iI ^ Z;
break;
case "alt_left":
case "alt_right":
case "ctrl_left":
case "ctrl_right":
iI = iI ^ (i.altKey << 1 ^ w) ^ (i.ctrlKey << 2 ^ W);
break;
default:
if (_) DOM.CSS(e).addClass(y.buttonDown);
break
}
if (X != iI) {
B(iI);
b();
}
i.preventDefault();
i.stopPropagation();
};
修改為：
var d = function (i) {
var e = DOM.getParent(i.srcElement || i.target, 'a');
if (!e || e.parentNode.id.indexOf(Q) < 0) return;
e = e.parentNode;
var iI = X;
var il = e.id.substring(Q.length);
switch (il) {
case "caps":
iI = iI ^ s;
break;
case "input_method":
if (document.getElementById("kb_langselector").value == 'US US') {
VirtualKeyboard.switchLayout("CN Chinese Simpl. Pinyin");
}
else {
VirtualKeyboard.switchLayout("US US");
}
break;
case "shift_left":
case "shift_right":
if (i.shiftKey) break;
iI = iI ^ Z;
break;
case "alt_left":
case "alt_right":
case "ctrl_left":
case "ctrl_right":
iI = iI ^ (i.altKey << 1 ^ w) ^ (i.ctrlKey << 2 ^ W);
break;
default:
if (_) DOM.CSS(e).addClass(y.buttonDown);
break
}
if (X != iI) {
B(iI);
b();
}
i.preventDefault();
i.stopPropagation();
};
既然有了按鈕，就不需要顯示下面的下拉框了，所以，給它隱藏掉！
OK，大功告成！看下效果圖
外觀和功能搞定了，但一看它的文件夾，足足7M多，精簡！精簡過程就不寫啦，精簡完成后：
寫了這么多，謝謝你能把它看完，最后放上全部修改精簡完成之后的源碼！
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)tab選項卡效果的方法,實例分析了jquery實現(xiàn)tab選項卡切換效果的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了jQuery內(nèi)容選擇器與表單選擇器,結(jié)合實例形式分析了jQuery內(nèi)容選擇器與表單選擇器的功能、用法及相關(guān)操作注意事項,需要的朋友可以參考下2019-06-06
基于jquery+json格式文件的無刷新分頁實現(xiàn)代碼，需要的朋友可以參考下。2010-04-04
jQuery控制li上下循環(huán)滾動插件用法實例(附demo源碼下載)
這篇文章主要介紹了jQuery控制li上下循環(huán)滾動插件用法,結(jié)合實例形式分析了jQuery循環(huán)滾動插件的實現(xiàn)技巧與使用方法,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了jquery實現(xiàn)超簡潔的TAB選項卡效果代碼,涉及jquery通過鼠標(biāo)click事件結(jié)合鏈?zhǔn)讲僮鲃討B(tài)操作tab選項卡的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
很多時候我們需要按時間間隔執(zhí)行一個任務(wù),當(dāng)滿足一定條件時停止執(zhí)行.此插件旨在解決這一經(jīng)常遇到的問題2013-12-12
本文給大家介紹的是一種檢測返回值的數(shù)據(jù)類型的方法，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要介紹了jQuery控制網(wǎng)頁打印指定區(qū)域的方法,涉及jQuery操作html元素的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
對于學(xué)習(xí)使用jquery 的朋友，能用的到，簡單的了解下jquery的一些操作。2009-02-02
一個小圖標(biāo)特效，非常有趣的，下面給大家分享基于jquery制作的小圖標(biāo)上下滑動特效，代碼簡單易懂，需要的朋友參考下2017-01-01