欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

功能強大的Javascript虛擬鍵盤，推薦使用
admin
2013年2月16日 10:25 本文熱度 5128




文章簡介：先簡單介紹一下VirtualKeyboard，它內(nèi)置了100多種鍵盤布局和200多種輸入法，9套可選皮膚方案，而且支持自建輸入法，功能相當強大。

最近做項目，我負責做網(wǎng)頁前端，客戶需要利用觸摸屏進行操作，不外接鼠標鍵盤，但要求能錄入文字，包括數(shù)字，英文，中文。思考了一下，決定用JS實現(xiàn)虛擬鍵盤。


首先上網(wǎng)搜索了一下JS虛擬鍵盤，在經(jīng)過仔細篩選后，相中了VirtualKeyboard，一款功能強大的JS虛擬鍵盤插件。


先簡單介紹一下VirtualKeyboard，它內(nèi)置了100多種鍵盤布局和200多種輸入法，9套可選皮膚方案，而且支持自建輸入法，功能相當強大。


先附上下載地址，我傳到網(wǎng)盤里了，目前的最新版本3.71：http://dl.vmall.com/c0os8yayzc


下載下來先查看它的演示文檔，依次打開Jsvk\jscripts\demo_inline.html，看到虛擬鍵盤做的還是蠻漂亮的，而且支持中文拼音輸入，完全符合預期。如下圖所示：



集成到項目中去，說干就干！


首先將Jsvk\jscripts目錄下的文件復制到項目中去，文本文件和html演示文件可以刪掉。


項目頁面中引用JS文件：

  1. <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 表示默認輸入法設置為簡體中文，vk_skin=flat_gray 表示默認皮膚選用flat_gray。這兩個可以根據(jù)個人需要進行設置。


調(diào)用/隱藏虛擬鍵盤的函數(shù)：

  1. VirtualKeyboard.toggle("txt_Search", "softkey"); 

txt_Search是文本框的ID,softkey是虛擬鍵盤顯示位置元素的ID。


下面是個簡單的例子：

  1. <html> 
  2.     <head> 
  3.     <script type="text/javascript" src="vk_loader.js?vk_layout=CN%20Chinese%20Simpl.%20Pinyin&vk_skin=flat_gray" ></script> 
  4.     </head> 
  5.     <body> 
  6.         <input type="text" id="txt_Search" onfocus="VirtualKeyboard.toggle('txt_Search', 'softkey')" onblur="VirtualKeyboard.toggle('txt_Search','softkey');" /> 
  7.         <div id="softkey"></div> 
  8.     </body> 
  9. </html> 

效果：



一步一步定制自己需要的功能


基本功能實現(xiàn)了，接下來就是中英文切換。先點擊CapsLock切換到大寫試試，結(jié)果失望了，中文狀態(tài)下切換到大寫輸入的依然是中文。只能點擊右下角的輸入法選擇菜單，找到US，切換到英文輸入法。這可不行，每次都要在上百個選項里來回切換，用戶體驗得有多差啊！


于是，我有了初步想法，清空下拉列表，手動構(gòu)建一個只有中文和英文選項的列表。要清空下拉列表，首先要知道它的ID，這種層一般都是動態(tài)創(chuàng)建的，于是找到Jsvk\jscripts\virtualkeyboard.js,打開一看，不出所料，代碼是壓縮過以后的，能直接讀懂的都是神人。于是要先對它進行解壓。打開http://jsbeautifier.org/，將JS文件中的代碼復制到輸入框中，點擊一下按鈕，解壓完成。ctrl+a,ctrl+c復制到新的JS文件中，OK，可以閱讀了。搜索”<select“關(guān)鍵字，一下子就找到了，代碼如下：

  1. "<select id=\"kb_langselector\"></select>" + "<select id=\"kb_mappingselector\"></select>" 

kb_mappingselector是鍵盤布局選擇框的ID，kb_langselector是輸入法選擇框的ID，kb_langselector就是我們要的ID。


有了ID，就可以修改了，因為是動態(tài)創(chuàng)建的，只有當創(chuàng)建完成以后才可以取到它的ID，于是我把代碼寫到了虛擬鍵盤加載之后。


以下代碼用到了JQuery框架，需要先引用JQuery方可正常使用。

  1. function test(){  
  2. $("#kb_langselector").empty().append("<option value='US US'>英文</option><option value='CN Chinese Simpl. Pinyin'>中文</option>").change(function (){   
  3. VirtualKeyboard.switchLayout(this.value);return false;  
  4. });  
  5. } 

測試一下發(fā)現(xiàn)了問題，載入停在了10%，頁面提示JS錯誤。




通過錯誤描述大概猜到是我構(gòu)建的option有問題，但具體問題出在哪我?guī)捉?jīng)跟蹤調(diào)試也沒找到，如果哪位大俠找到錯誤還望不吝賜教！


遇到錯誤久攻不下，轉(zhuǎn)變思路吧！


初步設想失敗了，于是我轉(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最后加入下面的代碼。

  1. #kbDesk div#kb_binput_method {  
  2.     float: right;  
  3.     width: 102px;  
  4. }  
  5. #kbDesk div#kb_binput_method a {  
  6.         background-position: -453px 0px;  
  7. }  
  8. #kbDesk div#kb_binput_method.kbButtonHover a {  
  9.         background-position: -453px -38px;  
  10. }  
  11. #kbDesk div#kb_binput_method.kbButtonDown a {  
  12.         background-position: -453px -76px;  
  13. } 

接下來要在JS文件中給按鈕定義事件。打開virtualkeyboard.js，找到

  1. var C = {  
  2. : 'backspace',  
  3. : 'tab',  
  4. : 'enter',  
  5. : 'caps',  
  6. : 'shift_left',  
  7. : 'shift_right',  
  8. : 'del',  
  9. : 'ctrl_left',  
  10. : 'alt_left',  
  11. : 'space',  
  12. : 'alt_right',  
  13. : 'ctrl_right' 
  14.     }; 

在下面加上59: 'input_method'，記得在'ctrl_right'后面加上逗號。修改后：

  1. var C = {  
  2. : 'backspace',  
  3. : 'tab',  
  4. : 'enter',  
  5. : 'caps',  
  6. : 'shift_left',  
  7. : 'shift_right',  
  8. : 'del',  
  9. : 'ctrl_left',  
  10. : 'alt_left',  
  11. : 'space',  
  12. : 'alt_right',  
  13. : 'ctrl_right',  
  14. : 'input_method' 
  15.     }; 

繼續(xù)找到按鈕點擊響應代碼：

  1. var d = function (i) {  
  2.         var e = DOM.getParent(i.srcElement || i.target, 'a');  
  3.         if (!e || e.parentNode.id.indexOf(Q) < 0) return;  
  4.         e = e.parentNode;  
  5.         var iI = X;  
  6.         var il = e.id.substring(Q.length);  
  7.         switch (il) {  
  8.             case "caps":  
  9.                 iI = iI ^ s;  
  10.                 break;  
  11.             case "shift_left":  
  12.             case "shift_right":  
  13.                 if (i.shiftKey) break;  
  14.                 iI = iI ^ Z;  
  15.                 break;  
  16.             case "alt_left":  
  17.             case "alt_right":  
  18.             case "ctrl_left":  
  19.             case "ctrl_right":  
  20.                 iI = iI ^ (i.altKey << 1 ^ w) ^ (i.ctrlKey << 2 ^ W);  
  21.                 break;  
  22.             default:  
  23.                 if (_) DOM.CSS(e).addClass(y.buttonDown);  
  24.                 break 
  25.         }  
  26.         if (X != iI) {  
  27.             B(iI);  
  28.             b();  
  29.         }  
  30.         i.preventDefault();  
  31.         i.stopPropagation();  
  32.     }; 

修改為：

  1. var d = function (i) {  
  2.         var e = DOM.getParent(i.srcElement || i.target, 'a');  
  3.         if (!e || e.parentNode.id.indexOf(Q) < 0) return;  
  4.         e = e.parentNode;  
  5.         var iI = X;  
  6.         var il = e.id.substring(Q.length);  
  7.         switch (il) {  
  8.             case "caps":  
  9.                 iI = iI ^ s;  
  10.                 break;  
  11.             case "input_method":  
  12.                 if (document.getElementById("kb_langselector").value == 'US US') {  
  13.                     VirtualKeyboard.switchLayout("CN Chinese Simpl. Pinyin");  
  14.  
  15.                 }  
  16.                 else {  
  17.                     VirtualKeyboard.switchLayout("US US");  
  18.  
  19.                 }  
  20.                 break;  
  21.             case "shift_left":  
  22.             case "shift_right":  
  23.                 if (i.shiftKey) break;  
  24.                 iI = iI ^ Z;  
  25.                 break;  
  26.             case "alt_left":  
  27.             case "alt_right":  
  28.             case "ctrl_left":  
  29.             case "ctrl_right":  
  30.                 iI = iI ^ (i.altKey << 1 ^ w) ^ (i.ctrlKey << 2 ^ W);  
  31.                 break;  
  32.             default:  
  33.                 if (_) DOM.CSS(e).addClass(y.buttonDown);  
  34.                 break 
  35.         }  
  36.         if (X != iI) {  
  37.             B(iI);  
  38.             b();  
  39.         }  
  40.         i.preventDefault();  
  41.         i.stopPropagation();  
  42.     }; 

既然有了按鈕，就不需要顯示下面的下拉框了，所以，給它隱藏掉！


OK，大功告成！看下效果圖



外觀和功能搞定了，但一看它的文件夾，足足7M多，精簡！精簡過程就不寫啦，精簡完成后：



寫了這么多，謝謝你能把它看完，最后放上全部修改精簡完成之后的源碼！


http://dl.vmall.com/c06xvbxyjx


原文鏈接：http://www.cnblogs.com/nnzfly/archive/2013/01/22/2871547.html


該文章在 2013/2/16 10:25:45 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運作、調(diào)度、堆場、車隊、財務費用、相關(guān)報表等業(yè)務管理，結(jié)合碼頭的業(yè)務特點，圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved