功能强大的JS虚拟键盘

最近做项目，我负责做网页前端，客户需要利用触摸屏进行操作，不外接鼠标键盘，但要求能录入文字，包括数字，英文，中文。思考了一下，决定用JS实现虚拟键盘。

创新互联建站是一家集网站建设,常宁企业网站建设,常宁品牌网站建设,网站定制,常宁网站建设报价,网络营销,网络优化,常宁网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

首先上网搜索了一下JS虚拟键盘，在经过仔细筛选后，相中了VirtualKeyboard，一款功能强大的JS虚拟键盘插件。

先简单介绍一下VirtualKeyboard，它内置了100多种键盘布局和200多种输入法，9套可选皮肤方案，而且支持自建输入法，功能相当强大。

先附上下载地址，我传到网盘里了，目前的最新版本3.71：http://dl.vmall.com/c0os8yayzc

下载下来先查看它的演示文档，依次打开Jsvk\jscripts\demo_inline.html，看到虚拟键盘做的还是蛮漂亮的，而且支持中文拼音输入，完全符合预期。如下图所示：

集成到项目中去，说干就干！

首先将Jsvk\jscripts目录下的文件复制到项目中去，文本文件和html演示文件可以删掉。

项目页面中引用JS文件：

 
 
 
 
      
  
  
  
  1.  
    2.

解释一下：vk_layout=CN%20Chinese%20Simpl.%20Pinyin 表示默认输入法设置为简体中文，vk_skin=flat_gray 表示默认皮肤选用flat_gray。这两个可以根据个人需要进行设置。

调用/隐藏虚拟键盘的函数：

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

txt_Search是文本框的ID,softkey是虚拟键盘显示位置元素的ID。

下面是个简单的例子：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.      
    3.   
  
  
  
  3.     　　 
    4.   
  
  
  
  4.      
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.          
    7.   
  
  
  
  7.         
 
  •      
  •  

    • 效果：

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

    基本功能实现了，接下来就是中英文切换。先点击CapsLock切换到大写试试，结果失望了，中文状态下切换到大写输入的依然是中文。只能点击右下角的输入法选择菜单，找到US，切换到英文输入法。这可不行，每次都要在上百个选项里来回切换，用户体验得有多差啊！

    于是，我有了初步想法，清空下拉列表，手动构建一个只有中文和英文选项的列表。要清空下拉列表，首先要知道它的ID，这种层一般都是动态创建的，于是找到Jsvk\jscripts\virtualkeyboard.js,打开一看，不出所料，代码是压缩过以后的，能直接读懂的都是神人。于是要先对它进行解压。打开http://jsbeautifier.org/，将JS文件中的代码复制到输入框中，点击一下按钮，解压完成。ctrl+a,ctrl+c复制到新的JS文件中，OK，可以阅读了。搜索”

     
 
 
 
        
  
  
  
    1. "" + "" 
      2.

    kb_mappingselector是键盘布局选择框的ID，kb_langselector是输入法选择框的ID，kb_langselector就是我们要的ID。

    有了ID，就可以修改了，因为是动态创建的，只有当创建完成以后才可以取到它的ID，于是我把代码写到了虚拟键盘加载之后。

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

     
 
 
 
        
  
  
  
    1. function test(){  
      2.   
  
  
  
    2. $("#kb_langselector").empty().append("英文中文").change(function (){   
      3.   
  
  
  
    3. VirtualKeyboard.switchLayout(this.value);return false;  
      4.   
  
  
  
    4. });  
      5.   
  
  
  
    5. } 
      6.

    测试一下发现了问题，载入停在了10%，页面提示JS错误。

    通过错误描述大概猜到是我构建的option有问题，但具体问题出在哪我几经跟踪调试也没找到，如果哪位大侠找到错误还望不吝赐教！

    遇到错误久攻不下，转变思路吧！

    初步设想失败了，于是我转变思路，既然我构建的有问题，那好，我不构建了，你自己构建，但多余的我不需要。

    按照这个思路，我重新研究加载代码，发现输入法加载的JS是在Jsvk\jscripts\layouts\layouts.js中定义的。于是果断删除多余的选项，只留下了Chinese Simpl. Pinyin和US两个选项。改完后的效果图如下，只有中文和英文两个选项，清爽多了。

    这还不是我想要的！

    中英文切换实现了，但操作还不够便捷，我需要的是一键切换，为什么不在键盘中增加一个切换键呢？

    首先找到皮肤文件，\Jsvk\jscripts\css\flat_gray\button_set.png,我要自己动手加个按键！

    原图：

    修改后：

    只改图片肯定不够，按钮定位在样式表里，继续修改样式表！在样式表\Jsvk\jscripts\css\flat_gray\keyboard.css最后加入下面的代码。

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

    接下来要在JS文件中给按钮定义事件。打开virtualkeyboard.js，找到

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

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

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

    继续找到按钮点击响应代码：

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

    修改为：

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

    既然有了按钮，就不需要显示下面的下拉框了，所以，给它隐藏掉！

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

    外观和功能搞定了，但一看它的文件夹，足足7M多，精简！精简过程就不写啦，精简完成后：

    写了这么多，谢谢你能把它看完，最后放上全部修改精简完成之后的源码！

    http://dl.vmall.com/c06xvbxyjx

    网站栏目：功能强大的JS虚拟键盘
    浏览路径：http://www.36103.cn/qtweb/news40/6890.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    网站改版知识

    行业网站建设

    防护网厂　　 　成都小程序开发　　 　app软件开发公司　　 　绵阳科技城电信IDC机房　　 　安防网站建设方案　　 　教育建设方案　　 　成都商城开发　　 　抖音短视频拍摄　　 　小程序开发　　 　全网营销　　 　高端网站定制　　 　达州做网站　　 　公司网站建设　　 　腾讯云虚拟主机　　 　成都做网站　　 　德阳做网站　　 　成都做网站　　 　尊格展览　　 　边坡防护网　　 　成都雪糕加盟