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


Posted in Javascript onOctober 11, 2014

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

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

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

先附上下载地址,目前的最新版本3.94:http://www.corallosoftware.it/Download/download.html 本教程使用的是3.71就不单独提供下载了,有需要的朋友可以下载我修改完毕的,在文章的最后

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

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

集成到项目中去,说干就干!

首先将Jsvk\jscripts目录下的文件复制到项目中去,文本文件和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 表示默认输入法设置为简体中文,

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

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

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>       

效果:

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

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

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

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

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

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

有了ID,就可以修改了,因为是动态创建的,只有当创建完成以后才可以取到它的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;

});

}

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

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

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

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

遇到错误久攻不下,转变思路吧!

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

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

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

这还不是我想要的!

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

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

原图:

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

修改后:

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

只改图片肯定不够,按钮定位在样式表里,继续修改样式表!在样式表\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'

    };

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

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,大功告成!看下效果图

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

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

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

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

Javascript 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
自己开发Dojo的建议框架
Sep 24 Javascript
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 #Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 #Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 #Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 #Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 #Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 #Javascript
探讨js字符串数组拼接的性能问题
Oct 11 #Javascript
You might like
php抓取https的内容的代码
2010/04/06 PHP
js的event详解。
2006/09/06 Javascript
获取body标签的两种方法
2011/10/13 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
python装饰器深入学习
2018/04/06 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
python机器人运动范围问题的解答
2019/04/29 Python
python 实现多线程下载视频的代码
2019/11/15 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
Python魔术方法专题
2020/06/19 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
营销总监岗位职责范本
2014/02/26 职场文书
大学课外活动总结
2014/07/09 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电