jqKeyboard是一款jquery虚拟键盘插件。该虚拟键盘插件依赖于jquery ui，通过该插件，可以在页面中生成一个扁平风格的虚拟键盘面板。

安装

可以通过npm来安装jqKeyboard虚拟键盘插件。

npm install jq-keyboard --save

使用方法

在页面中引入jquery和jquery ui，jqkeyboard-min.js，jqk.layout.en，以及jqkeyboard.css文件。

<link rel="stylesheet" href="path/to/jqkeyboard.css" />
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery-ui.min.js"></script>
<script src="path/to/jqkeyboard.min.js"></script>
<script src="path/to/jqk.layout.en.js"></script>
初始化插件

在页面DOM元素加载完毕之后，可以通过jqKeyboard.init();方法来实例化该虚拟键盘。

jqKeyboard.init();

配置参数

jqKeyboard虚拟键盘插件提供了一些可用的配置参数。

  • containment：DOM元素，默认的容器为body。你可以指定自己的容器元素，那样的话，虚拟键盘只能在你指定的容器中进行拖拽。
  • allowed：一组输入元素。该选项用于指定jqKeyboard插件监听的input元素，不在数组中的元素将不会被监听。
  • icon："dark" 或 "light"。图标的颜色是暗色还是亮色。默认为亮色。

例如：

$(function () {
    "use strict";

    jqKeyboard.init({
        containment: "#field",
        allowed: ["input[type='text']", "#username-input"],
        icon: "dark"
    });
});

jqKeyboard虚拟键盘插件的github地址为：https://github.com/hawkgs/jqKeyboard