创建个性化和强大的Jquery VirtualKeyboard

时间：2021-09-09 来源：互联网编辑：宝哥软件园浏览：次

最近负责网页前端。客户需要在没有外接鼠标和键盘的情况下使用触摸屏进行操作，但他们需要能够输入字符，包括数字、英语和中文。想了想，决定用JS实现虚拟键盘。

首先我在网上搜索了JS VirtualKeyboard。经过仔细筛选，我选择了虚拟键盘，一个功能强大的JS虚拟键盘插件。

首先简单介绍一下VirtualKeyboard，内置100多种键盘布局，200多种输入法，9套可选皮肤方案，支持自建输入法。

先附上下载地址，最新版本3.94:http://www.corallosoftware.it/Download/download.html.本教程使用的是3.71，所以不会单独下载。有需要的朋友可以在文末下载我的修订版

下载后，首先检查其演示文档，然后依次打开Jsvk \ jscripts \ demo _ inline.html。可以看到虚拟键盘相当漂亮，支持中文拼音输入，完全符合预期。如下图所示：

融入项目，就去做！

首先，将Jsvk \ jscripts目录中的文件复制到项目中，并删除文本文件和html表示文件。

项目页面引用了JS文件：复制的代码如下： script Type=' text/JavaScript ' src=' http : jscripts/vk _ loader . JS？vk _ layout=cnchine simple .拼音vk _ skin=flat _ gray '/脚本解释：vk _ layout=cnchine simple .拼音表示默认输入法设置为简体中文。

Vk_skin=flat_gray表示选择flat_gray作为默认皮肤。这两个可以根据个人需要设置。

调用/隐藏虚拟键盘的功能：

virtualkeyboard . toggle(' txt _ Search '，'软键')；Txt_Search是文本框的id，软键是虚拟键盘的显示位置元素的ID。

下面是一个简单的例子：

复制的代码如下： HTML head script Type=' text/JavaScript ' src=' http : vk _ loader . js？vk_layout=CN中文Simpl。pinyinvk _ skin=flat _ gray '/script/head body输入类型=' text ' id=' txt _ Search ' on focus=' virtualkeyboard . toggle(' txt _ Search '，'软键')' on bulr=' virtualkeyboard . toggle(' txt _ Search '，'软键')；'/div id='软键'/div/正文/html

效果：

逐步定制您需要的功能

基本功能都实现了，下一步就是中英文切换。点击CapsLock先切换成大写，结果令人失望。切换到中文大写输入还是中文。只能点击右下角输入法选择菜单，找到US，切换到英文输入法。你不能这样。你每次都要在数百个选项中来回切换。用户体验有多差！

所以，我有了一个初步的想法，清空下拉列表，手动建立一个只有中文和英文选项的列表。要清除下拉列表，必须先知道它的ID，一般是动态创建的，所以找到jsvk \ jscripts \ virtualkeyboard . js打开。不出所料，代码被压缩了，所有能直接看懂的人都是神和人。所以我们需要先解压。打开http://jsbeautifier.org/,把JS文件中的代码复制到输入框中，点击一次按钮，解压完成。Ctrl a、ctrl c都复制到新的JS文件中，OK，就可以读取了。搜索关键字“选择”，并立即找到它。代码如下：

select ID=\ ' kb_langselector \ '/select ' ' select ID=\ ' kb _ mapping selector \ '/select ' kb _ mapping selector是键盘布局选择框的ID，kb_langselector是输入法选择框的ID，kb _ lang selector是我们的ID。

有了ID就可以修改了，因为是动态创建的，创建完成后才能获取它的ID，所以我是在加载虚拟键盘后写的代码。

下面的代码使用了JQuery框架，所以需要引用JQuery才能正常使用。复制代码如下：函数test () {$ ('# KB _ langselector ')。空()。追加('选项值=' us us '英文/选项值=' cn中文最简单。拼音'中文/选项')。change(function(){ virtualkeyboard . switch layout(this . value)；返回false});}

测试一下发现了问题，载入停在了10%,页面提示射流研究…错误。

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

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

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

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

这还不是我想要的！

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

首先找到皮肤文件，\ Jsvk \ Jscript \ CSS \ flat _ gray \ button _ set。巴布亚新几内亚，我要自己动手加个按键！

原图：

修改后：

只改图片肯定不够，按钮定位在样式表里，继续修改样式表！在样式表\ Jsvk \ jscripts \ CSS \ flat _ gray \键盘。半铸钢钢性铸铁(Cast Semi-Steel)最后加入下面的代码。

复制代码代码如下： # KbDesk div # kb _ binput _ method { float : right；宽度： 102像素；} # KbDesk div # kb _ binput _ method a {背景-位置：-453 px 0px；} # kbDesk div # kb _ binput _ method。kbbuttonhover a { background-position :-453 px-38px；} # kbDesk div # kb _ binput _ method。kbbuttondown a {背景-位置：-453 px-76px；}

接下来要在射流研究…文件中给按钮定义事件。打开virtualkeyboard.js，找到

复制代码代码如下：var C={ 14: '退格',15: '制表符',28: '回车',29: '大写，41: 'shift_left '，52: 'shift_right '，53: ' del '，54: ' ctrl _ left '，55: 'alt_left '，56: '空格',573:

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

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

复制代码代码如下： var d=函数(I){ var e=DOM。getparent(I . srcelement | | I . target，' a ')；if(！e || e.parentNode.id.indexOf(Q) 0)返回；e=e . ParentNodeVar Ii=X；var il=e . id。子串(q .长度)；switch(il){ case ' caps ' : ii=ii ^ s；打破；case ' shift _ left ' : case ' shift _ right ' : if(I . shift键)断；ii=ii ^ z；打破；case ' alt _ left ' : case ' alt _ right ' : case ' ctrl _ left ' : case ' ctrl _ right ' : ii=ii ^(i . alt key 1 ^ w)^(i . ctrl key 2 ^ w)；打破；default: if (_) DOM .CSS(e)1 .添加类(y .按钮向下)；break } if (X！=IIi){ B(IIi)；b()；} I . PreventDefault()；I . stopperpagation()；};

修改为：

复制代码代码如下： var d=函数(I){ var e=DOM。getparent(I . srcelement | | I . target，' a ')；if(！e || e.parentNode.id.indexOf(Q) 0)返回；e=e . ParentNodeVar Ii=X；var il=e . id。子串(q .长度)；switch(il){ case ' caps ' : ii=ii ^ s；打破；case ' input _ method ' : if(文档。getelementbyid(' kb _ lang选择器').value==' US US '){ virtualkeyboard。开关布局(' CN中文简单.拼音');

} else { virtualkeyboard。开关布局(‘美国’)；

} breakcase ' shift _ left ' : case ' shift _ right ' : if(I . shift key)break；ii=ii ^ z；打破；case ' alt _ left ' : case ' alt _ right ' : case ' ctrl _ left ' : case ' ctrl _ right ' : ii=ii ^(I . altkey 1 ^ w)^(I . ctrl key 2 ^ w)；打破；default: if (_) DOM。CSS(e)。add class(y . button down)；break } if (X！=IIi){ B(IIi)；b()；} I . PreventDefault()；I . stopperpagation()；};既然有了按钮，就不需要显示下面的下拉框了，就隐藏吧！

好了，你完了！看效果图