无为清净楼资源网

打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
网络编程 2024/11/19 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com

最近做项目，我负责做网页前端，客户需要利用触摸屏进行操作，不外接鼠标键盘，但要求能录入文字，包括数字，英文，中文。思考了一下，决定用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="/UploadFiles/2021-04-02/vk_loader.js">
解释一下：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="/UploadFiles/2021-04-02/vk_loader.js">     </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)

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

https://www.jb51.net/jiaoben/228716.html

标签：
Jquery,虚拟键盘,VirtualKeyboard
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/11/19

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接