打造个性化的功能强大的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 相关文章推荐
JS的数组的扩展实例代码
Jul 09 Javascript
最简单的jQuery程序 入门者学习
Jul 09 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 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字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
PyQt5 多窗口连接实例
2019/06/19 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
Python库安装速度过慢解决方案
2020/07/14 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
Pycharm中如何关掉python console
2020/10/27 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
J2EE是技术还是平台还是框架
2016/08/14 面试题
js实现弹框效果
2021/03/24 Javascript
美发活动策划书
2014/01/14 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
宣传保护环境的公益广告词
2014/03/13 职场文书
三项教育活动实施方案
2014/03/30 职场文书
我爱读书演讲稿
2014/05/07 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
课改心得体会范文
2016/01/25 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
关于nginx 实现jira反向代理的问题
2021/09/25 Servers