打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)

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

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

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

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

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

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

　　项目页面中引用JS文件：

代码如下:

解释一下：vk_layout=CN%20Chinese%20Simpl.%20Pinyin 表示默认输入法设置为简体中文，

vk_skin=flat_gray 表示默认皮肤选用flat_gray。这两个可以根据个人需要进行设置。

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

VirtualKeyboard.toggle("txt_Search","softkey"); 　　txt_Search是文本框的ID,softkey是虚拟键盘显示位置元素的ID。

　　下面是个简单的例子：

代码如下:

　　效果：

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

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

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

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

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

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

代码如下:

test(){ $("#kb_langselector").empty().append("").change(function (){ VirtualKeyboard.switchLayout(this.value);return false; }); }

　　测试一下发现了问题，载入停在了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最后加入下面的代码。

代码如下:

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

代码如下:

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

代码如下:

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

代码如下:

　　修改为：

代码如下:

nese 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多，精简！精简过程就不写啦，精简完成后：

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

VirtualKeyboard 虚拟键盘

上一篇：分享20款美化网站的 jQuery Lightb 下一篇：jquery动态加载js/css文件方法(自写

相关推荐

jquery页面搜索关键词突出显示

页面搜索关键词突出 // 页面搜索关键词突出 $(function () { $(".list_r").find('span').css({ // 每次搜索开始，先把所有字体颜色恢复初始状态 'color': "#838792"

jQuery实时显示日期、时间

jQuery实时显示日期、时间 html: <span id="time"></span> js: <script src="Js/jquery.min.js"></script> <%--引用jQuery

jQuery 添加水印

jQuery 添加水印 <script src="../../../../AJs/jquery.min.js"></script> <script type="text/javascript"> $(document).re

Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息

中文：Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息，之所以出现此错误，常见的原因是：通过调用Response.Write()修改相应时，将启用响应筛选器、HttpModules或服务器追踪。详细信息：分析附近的“输

Asp.net 后台调用js方法

1. 用Response.Write方法代码如下： Response.Write("<script type='text/javascript'>alert("XXX");</script>"); 此方只能调用内部函数

Jquery实现按钮点击遮罩加载，处理完后恢复

Jquery实现按钮点击遮罩加载，处理完后恢复思路： 1.点击按钮调用OnClientClick事件，添加dom元素及样式。 2.当Click中逻辑执行完后，在Click中调用js方法删除掉刚才添加的dom元素。 1 <%@ Page Language="C#" Auto

.Net后台调用js，提示、打开新窗体、关闭当前窗体

.Net后台调用js，提示、关闭当前窗体、打开新窗体 Response.Write("<script>window.alert('支付成功!');window.open('/JkCommerce/" + href + "',&

.net 搜索联想词

思路： 1.ajax请求后台方法获取数据。 2.通过jquery将请求到的数据显示在页面上。前台 <div class="sc_con" id="bbsearch"> <input type="text" class=&

JS点击子元素不触发父元素点击事件(js阻止冒泡)

<html> <title></title> <head> <meta charset="utf-8"> <style type="text/css"> .divone{width:100

jQuery表单验证提交：前台验证一

jQuery表单验证提交：前台验证一（图文+视频）

小编推荐

苹果市值2025年有望达4万亿美元