最近公司有个项目,这个项目的显示器是触摸屏,

所以在一些需要简单输入的input需要加一个触摸屏的软键盘,

我在github上找了很多开源项目,最后选择了Virtual Keyboard,

以下是我自己学习和使用Virtual Keyboard的经验和理解,可能不是很深入,嘿嘿。。。。。。

以下是正文

首先我们需要从github上把项目的代码拉下来,地址:https://github.com/Mottie/Keyboard

Virtual Keyboard官网地址:http://mottie.github.io/Keyboard/

把代码拉下来之后呢,把Keyboard-master文件整个考到你的项目中,(有小伙伴会问,这个文件太大了,怎么办,先不管,后来删没有用到的就好啦)

然后根据你引入文件的路径,把下面这些文件引入你的项目的index之类(就是你自己通常往哪里引入js,css)

  jquery.min.js 
jquery-ui.css
bootstrap.min.css
jquery-ui.min.js
keyboard.css
jquery.keyboard.js
keyboard-previewkeyset.css
jquery.keyboard.extension-all.js
引入之后,你哪个input需要软键盘,就把它的id设成keyboard,然后设置一下自己的js,
代码是在是太多了,
            $('#keyboard').keyboard({    
language : null, // string or array
rtl : false, // language direction right-to-left
layout : 'qwerty', //键盘的种类
customLayout : { 'normal': ['{cancel}'] },
position : {
of : null,
my : 'center top',
at : 'center top',
at2: 'center bottom'
},
reposition : true,
usePreview : true,
alwaysOpen : false,
initialFocus : true,
noFocus : false,
stayOpen : false,
userClosed : false,
ignoreEsc : false,
closeByClickEvent : false,
display : {
'a' : '\u2714:Accept (Shift-Enter)',
'accept' : 'Accept:Accept (Shift-Enter)',
'alt' : 'AltGr:Alternate Graphemes',
'b' : '\u232b:Backspace',
'bksp' : 'Bksp:Backspace',
'c' : '\u2716:Cancel (Esc)',
'cancel' : 'Cancel:Cancel (Esc)',
'clear' : 'C:Clear',
'combo' : '\u00f6:Toggle Combo Keys',
'dec' : '.:Decimal',
'e' : '\u21b5:Enter',
'empty' : '\u00a0', //  
'enter' : 'Enter:Enter',
'left' : '\u2190',
'lock' : '\u21ea Lock:Caps Lock',
'next' : 'Next',
'prev' : 'Prev',
'right' : '\u2192',
's' : '\u21e7:Shift',
'shift' : 'Shift:Shift',
'sign' : '\u00b1:Change Sign',
'space' : ' :Space',
't' : '\u21e5:Tab',
'tab' : '\u21e5 Tab:Tab',
'toggle' : ' ',
'valid': 'valid',
'invalid': 'invalid',
'active': 'active',
'disabled': 'disabled'
},
wheelMessage : 'Use mousewheel to see other keys',
css : {
input : 'ui-widget-content ui-corner-all',
container : 'ui-widget-content ui-widget ui-corner-all ui-helper-clearfix',
popup: '',
buttonDefault : 'ui-state-default ui-corner-all',
buttonHover : 'ui-state-hover',
buttonAction : 'ui-state-active',
buttonDisabled : 'ui-state-disabled',
buttonEmpty : 'ui-keyboard-empty'
},
autoAccept : true,
autoAcceptOnEsc : false,
lockInput : false,
restrictInput : true,
restrictInclude : '', // e.g. 'a b foo \ud83d\ude38'
acceptValid : true,
autoAcceptOnValid : false,
cancelClose : true,
tabNavigation : false,
enterNavigation : true,
enterMod : 'altKey',
stopAtEnd : true,
appendLocally : false,
appendTo : 'body',
stickyShift : true,
caretToEnd : false,
preventPaste : true,
scrollAdjustment : 10,
maxLength : false,
maxInsert : true,
repeatDelay : 500,
repeatRate : 20,
resetDefault : false,
openOn : 'focus',
keyBinding : 'mousedown touchstart',
useWheel : true,
useCombos : true,
initialized : function(e, keyboard, el) {},
beforeVisible : function(e, keyboard, el) {},
visible : function(e, keyboard, el) {},
beforeInsert : function(e, keyboard, el, textToAdd) { return textToAdd; },
change : function(e, keyboard, el) {},
beforeClose : function(e, keyboard, el, accepted) {},
accepted : function(e, keyboard, el) {},
canceled : function(e, keyboard, el) {},
restricted : function(e, keyboard, el) {},
hidden : function(e, keyboard, el) {},
switchInput : function(keyboard, goToNext, isAccepted) {},
create : function(keyboard) { return keyboard.buildKeyboard(); },
buildKey : function( keyboard, data ) {
return data; },
validate : function() {
return true; }
});
如果需要数字键盘,可以把这些参数设成true
            layout : 'num',
restrictInput : true, // Prevent keys not in the displayed keyboard from being typed in
preventPaste : true, // prevent ctrl-v and right click
autoAccept : true
我自己是用angular开发的,为了在项目中可以哪里需要哪里调用,我封装在一个factory里面,
下面送上我的源码
html:
   
js:

factory:


												

触摸屏键盘插件Virtual Keyboard 该怎么用 Virtual Keyboard 入门指南的更多相关文章

  1. jQuery软键盘插件

    1.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.or ...

  2. 基于jQuery的数字键盘插件

    有时,我们需要在网页上使用软键盘.今天,就给大家带来一个基于jQuery的数字键盘插件,除了jQuery,不需要依赖任何文件资源.纯数字键盘,有退格,有清除,不支持输入小数(需要的可以自己改一下,主要 ...

  3. apple mac 下使用机械键盘的办法,键盘映射工具软件,apple mac Mechanical keyboard

    apple mac 下使用机械键盘的办法,键盘映射工具软件,apple mac Mechanical keyboard 想在苹果电脑 mac 系统下使用 机械键盘,大部分机械键盘不是为mac设计的,所 ...

  4. [New Portal]Windows Azure Virtual Machine (19) 关闭Azure Virtual Machine与VIP Address,Internal IP Address的关系(1)

    <Windows Azure Platform 系列文章目录> 默认情况下,通过Azure Management Portal创建的Public IP和Private IP都是随机分配的. ...

  5. [New Portal]Windows Azure Virtual Machine (20) 关闭Azure Virtual Machine与VIP Address,Internal IP Address的关系(2)

    <Windows Azure Platform 系列文章目录> 默认情况下,通过Azure Management Portal创建的Public IP和Private IP都是随机分配的. ...

  6. Windows Azure Virtual Network (7) 设置Azure Virtual Machine固定公网IP (Virtual IP Address, VIP) (2)

    <Windows Azure Platform 系列文章目录> 本文介绍的是,当用户在创建Azure Virtual Machine的时候,忘记绑定公网IP,需要重新绑定公网IP的具体操作 ...

  7. yarn 报错 requested virtual cores < 0, or requested virtual cores > max configured, requestedVirtualCores=6, maxVirtualCores=4 原因

    INFO ApplicationMaster:54 - Final app status: FAILED, exitCode: 13, (reason: Uncaught exception: org ...

  8. 《Three.js 入门指南》3.1.2 - 一份整齐的代码结构以及使用ORBIT CONTROLS插件(轨道控制)实现模型控制

    3.1.2 正式代码结构 & ORBIT CONTROLS插件(轨道控制) 说明 本节内容属于插入节,<Three.js入门指南>这本书中,只是简单的介绍了一些概念,是一本基础的入 ...

  9. Windows Azure Virtual Network (5) 设置Azure Virtual Machine固定Private IP

    <Windows Azure Platform 系列文章目录> 注意:本文介绍的是Global Azure (http://www.windowsazure.com),如果你使用的是由世纪 ...

随机推荐

  1. git使用笔记-git项目的建立及配置、创建子分支及独立分支、分支重命名

    一.git的基本使用 1.下载安装git (略) 2.配置gitconfig 配置内容:(主要是你的git的账户信息,提交命令的别名) 3.配置git公钥(输入$ ssh-keygen -t rsa ...

  2. calico的ipip与bgp的模式分析

    1.前言 BGP工作模式: bgp工作模式和flannel的host-gw模式几乎一样: bird是bgd的客户端,与集群中其它节点的bird进行通信,以便于交换各自的路由信息: 随着节点数量N的增加 ...

  3. 规则引擎 - drools 使用讲解(简单版) - Java

    drools规则引擎 项目链接 现状: 运维同学(各种同学)通过后台管理界面直接配置相关规则,这里是通过输入框.下拉框等完成输入的,非常简单: 规则配置完毕后,前端请求后端,此时服务端根据参数(即规则 ...

  4. 基于Docker搭建大数据集群(四)Spark部署

    主要内容 spark部署 前提 zookeeper正常使用 JAVA_HOME环境变量 HADOOP_HOME环境变量 安装包 微云下载 | tar包目录下 Spark2.4.4 一.环境准备 上传到 ...

  5. .NetCore技术研究-.NET Core迁移前的准备工作

    前段时间迁移.NET Core做了大量的试水和评估,今天整理一下分享给大家.大致有以下几个部分: 1. .NET Core的由来 2. 为什么要迁移.NET Core 3. .NET Core3.X主 ...

  6. Mysql INSTR函数

    在Mysql中,可以使用INSTR(str,substr)函数,用于在一个字符串(str)中搜索指定的字符(substr),返回找到指定的字符的第一个位置(index),index是从1开始计算,如果 ...

  7. SUSE Ceph 增加节点、减少节点、 删除OSD磁盘等操作 - Storage6

    一.测试环境描述 之前我们已快速部署好一套Ceph集群(3节点),现要测试在现有集群中在线方式增加节点 如下表中可以看到增加节点node004具体配置 主机名 Public网络 管理网络 集群网络 说 ...

  8. 体验Code::Blocks下的C++编程

    0.前言 在当前的行业发展和国际形势下,让更多的程序员思考跨平台编程问题.在众多的跨平台开发环境中,Code::Blocks具有独特的优势. 近二十年来,跨平台开发环境曾经如雨后春笋般产生,但是,由于 ...

  9. 记录一次redis cpu异常升高的排插思路

    好久没有写博客  现在重新捡起来  记录工作中遇到的问题  方便以后在遇到类似的问题也有一个参考. 背景:有一天生产服务器redis  cpu 频繁报警    单核cpu 所以在想是不是业务量上来了. ...

  10. JavaSE----02.Java语言基础

    02.Java语言基础 1.关键字     Java关键字是电脑语言里事先定义的,有特别意义的标识符,有时又叫保留字,还有特别意义的变量.Java的关键字对Java的编译器有特殊的意义,他们用来表示一 ...