基于JavaScript的可复用虚拟键盘实现方法及其应用与流程

本发明属于互联网技术领域，更具体地，涉及一种基于javascript的可复用虚拟键盘实现方法及其应用。

背景技术：

在某些触屏电脑的web应用中，在信息输入时候，会遇到windows软键盘无法自动唤醒的情况，现有解决方案一般有两种：一种是外接实体键盘；另外一种是在系统使用前对用户进行培训，或者写个说明文档，告知用户该如何手动调出系统软键盘。但上述两种解决方案都存在一些问题：在实际情况中，有些应用在使用时，因为空间限制或其他原因，不方便使用外接实体键盘；而通过培训或者文档说明等方式告知用户手动调出系统软键盘又非常影响用户体验。

技术实现要素：

针对现有技术的至少一个缺陷或改进需求，本发明提供了一种基于javascript的可复用虚拟键盘实现方法及其应用，利用传统的前端技术实现点击输入框即可唤醒虚拟键盘，具有开发成本低、兼容性好、易移植、功能较多、可个性化的优点。

为实现上述目的，按照本发明的第一方面，提供了一种基于javascript的可复用虚拟键盘实现方法，包括步骤：

s1，编写虚拟键盘js文件和虚拟键盘css文件，所述虚拟键盘js文件用于定义虚拟键盘函数，所述虚拟键盘函数用来绘制虚拟键盘外形、实现虚拟键盘输入功能、以及控制虚拟键盘唤醒和隐藏，所述虚拟键盘css文件用于配合绘制虚拟键盘外形及定义虚拟键盘样式；

s2，在待实现虚拟键盘功能的项目中通过script标签引入所述虚拟键盘js文件和jquery库，并且还通过link标签引入所述虚拟键盘css文件；

s3，为待实现虚拟键盘功能的项目中的输入框元素绑定所述虚拟键盘函数。

优选的，所述步骤s1包括子步骤：

s11，创建虚拟键盘js文件，为jquery的原型添加虚拟键盘函数对象，创建虚拟键盘css文件；

s12，在所述虚拟键盘函数中定义虚拟键盘外形、虚拟键盘输入按键、和虚拟键盘隐藏按键，在所述虚拟键盘css文件中配合绘制虚拟键盘外形及定义虚拟键盘样式；

s13，在所述虚拟键盘函数内部定义词典对象；

s14，在所述虚拟键盘js文件中为所有虚拟键盘按键绑定click事件。

优选的，所述步骤s12包括子步骤：

在所述虚拟键盘函数中新增类名为虚拟键盘的块级元素，该块级元素用作键盘容器，在所述虚拟键盘css文件中配合绘制虚拟键盘外形，在所述虚拟键盘函数中为虚拟键盘添加虚拟键盘隐藏按键；

在虚拟键盘的块级元素中新建类名为输出区的块级元素，该块级元素用于点击虚拟键盘输入按键时，显示和选择文字；

在输出区的块级元素下面添加类名为输入区的块级元素，该块级元素用于键盘输入按键的容器，并在容器内部用无序列表标签配合所述虚拟键盘css文件绘制虚拟键盘输入按键。

优选的，所述步骤s3包括子步骤：

为每个输入框元素绑定身份标识；

然后通过jquery的身份标识选择器选中身份标识绑定所述虚拟键盘函数。

优选的，可复用虚拟键盘实现方法还包括步骤：

复制所述虚拟键盘js文件和虚拟键盘css文件到新项目中；

在待实现虚拟键盘功能的新项目中再次执行所述步骤s2和s3。

优选的，可复用虚拟键盘实现方法还包括步骤：在所述虚拟键盘css文件修改虚拟键盘样式。

按照本发明的第二方面，提供了一种基于javascript的可复用虚拟键盘实现系统，包括步骤：

编写模块，用于编写虚拟键盘js文件和虚拟键盘css文件，所述虚拟键盘js文件用于定义虚拟键盘函数，所述虚拟键盘函数用来绘制虚拟键盘外形、实现虚拟键盘输入功能、以及控制虚拟键盘唤醒和隐藏，所述虚拟键盘css文件用于配合绘制虚拟键盘外形及定义虚拟键盘样式；

引入模块，用于在待实现虚拟键盘功能的项目中通过script标签引入所述虚拟键盘js文件和jquery库，并且还通过link标签引入所述虚拟键盘css文件；

关联模块，用于为待实现虚拟键盘功能的项目中的输入框元素绑定所述虚拟键盘函数。

按照本发明的第三方面，提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任一项方法。

总体而言，本发明利用传统的前端技术实现点击输入框即可唤醒虚拟键盘，与现有技术相比，具有有益效果：

(1)开发成本低：使用html，css，javascript等传统的前端技术，不涉及到其他语言也不需要配合后端服务器使用。

(2)兼容性好：由于使用的框架是jquery，jquery对低版本的ie浏览器和高版本的谷歌浏览器的兼容性都很好，所以本键盘的浏览器兼容性很好。

(3)易移植：virtualkeyboard.js和virtualkeyboard.css两个文件写好后可以在其他web项目中直接引用，不需要再次编写。

(4)功能较多：中文，符号，数字，大小写英文字母，空格均可输入，可满足web项目中绝大多数的输入要求。

(5)可个性化：修改键盘颜色，外观，大小，位置等，开发人员都可以自行在virtualkeyboard.css中修改，并且修改的难度也较低可以让其更好地满足不同的项目需求。

附图说明

图1是本发明实施例的虚拟键盘实现方法的流程图；

图2是本发明实施例的编写虚拟键盘绘制文件的流程图；

图3是本发明实施例的虚拟键盘复用的流程图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。此外，下面所描述的本发明各个实施方式中所涉及到的技术特征只要彼此之间未构成冲突就可以相互组合。

本发明实施例的一种基于javascript的可复用虚拟键盘实现方法，利用jquery框架，在jquery的原型中添加一个虚拟键盘函数对象(virtualkeyboard)，配合css样式文件，绘制键盘，并且使用jquery提供hide,show,click,val等方法，实现键盘的输入效果。

本发明实施例的一种基于javascript的可复用虚拟键盘实现方法可应用在以下场景中。当一个bs和cs融合的系统使用在win7系统的触屏电脑上，主由于业务功能使用的是b/s架构，上线使用时为了优化用户体验，在外层加了一层cs架构，导致系统在用户点击输入框时，系统自带的软键盘无法自动弹出，而系统在实际使用时，由于空间限制，无法使用外接实体键盘，而手动调出键盘的操作略微复杂。而本发明的可复用虚拟键盘实现方法可以很好地解决上述问题，实现实现点击输入框即可唤醒虚拟键盘的功能。

如图1所示，本发明实施例的一种基于javascript的可复用虚拟键盘实现方法，包括步骤：

s1，编写键盘的核心业务代码，即虚拟键盘js文件(virtualkeyboard.js)和虚拟键盘css文件(virtualkeyboard.css)。

virtualkeyboard.js用于定义虚拟键盘函数，虚拟键盘函数用来绘制虚拟键盘外形、实现键盘输入的功能和控制键盘的唤醒和隐藏。

virtualkeyboard.css是用于配合绘制虚拟键盘的外形，控制键盘大小，位置，颜色等虚拟键盘样式。

virtualkeyboard.js和virtualkeyboard.css文件都可以复用。

在需要修改键盘样式时，只需要修改virtualkeyboard.css文件即可。

s2，在项目中通过<script>标签引入virtualkeyboard.js和jquery库(jquery.min.js文件)，通过<link>标签引入virtualkeyboard.css文件。

s3，为项目中需要键盘输入的input元素绑定virtualkeyboard方法，即绑定虚拟键盘函数。具体方法是先给input元素绑定一个id，例如有个输入用户名的输入框，给该输入框绑定一个id为“loginname”，然后通过jquery的id选择器选中该元素并执行virtualkeyboard方法即可，即为

$("#loginname").virtualkeyboard()。

步骤s1中编写键盘的绘制文件包括如图2所示的如下步骤：

s11，为jquery的原型添加virtualkeyboard对象，以便可以在项目全局调用该方法，该方法的回调函数即为键盘绘制及键盘输入的方法。

s12，在虚拟键盘函数中定义虚拟键盘外形、虚拟键盘输入按键、和虚拟键盘隐藏按键，在虚拟键盘css文件中配合绘制虚拟键盘外形及定义虚拟键盘样式的代码；

优选地，步骤s12包括子步骤：

(1)在回调函数中，新增一个类名为virtualkeyboard的块级元素(div)，用做键盘容器，配合css绘制出键盘的外边框，并且在边框的右上角添加一个关闭按钮，用于键盘的关闭。

(2)然后在virtualkeyboard的div中新建一个类名输出区(outputzone)的div，点击虚拟键盘输入按键时，显示和选择文字，例如输入中文时，显示和选择中文文字。

(3)在outputzone的下面再添加一个类名为输入区(inputzone)的div，作为键盘按键部分的容器，并在容器内部用无序列表标签(ul/li)配合css绘制出数字，字母，空格，符号，中英文切换删除等键盘输入按键。此时键盘的基本外形已经绘制完毕。

s13：为了能够实现拼音输入，所以需要在函数内部定义一个词典(dictionary)的对象，用于储存常见中文文字的ascii码和拼音字符的对应关系，例如拼音“ai”对应的常见文字有“埃，挨，哎，唉，哀，皑，癌，蔼，矮，艾，碍，爱，隘，诶，捱，嗳，嗌，嫒，瑷，暧，砹，锿，霭”，转为ascii码则为

“\u57c3\u6328\u54ce\u5509\u54c0\u7691\u764c\u853c\u77ee\u827e\u788d\u7231\u9698\u8bf6\u6371\u55f3\u55cc\u5ad2\u7477\u66a7\u7839\u953f\u972d”。所以最后在dictionary对象中以键值对的形式存储为{ai:“\u57c3\u6328\u54ce\u5509\u54c0\u7691\u764c\u853c\u77ee\u827e\u788d\u7231\u9698\u8bf6\u6371\u55f3\u55cc\u5ad2\u7477\u66a7\u7839\u953f\u972d”},按照字母顺序，把所有中文拼音字符对应的常见字的ascii码全部以键值对的形式存储在dictionary对象中。

s14:每个虚拟键盘按钮绑定click事件。0-9和“！”，“@”等特殊符号位置相同，在符号按钮被点击时，利用jquery的text()方法切换按键上的值。大、小写字母切换同理，在大小写切换按钮被点击时通过text()切换改变按键对应的值。

在输入英文，数字及符号时，用户点击某个按钮，即可把该按钮的text值取出来，直接利用字符串拼接和jquery的val()方法改变绑定本方法的input输入框的value值实现输入效果。

在输入中文时，点击中英文切换按钮，切换到中文输入模式，用户按下相应按钮后，函数根据按钮对应的text值通过遍历的方法去dictionary对象中查询该字符对应的中文文字可能是哪些，并把对应的ascii码转换为中文，显示在inputzone中供用户选择，当用户点击某个文字后，通过jquery的val()方法改变相应的input输入框的value值，把该中文字显示在input输入框内，从而实现拼音中文输入。

在用户输入完成后可点击键盘右上方的关闭按钮或者切换焦点来关闭键盘，不影响用户的其他操作。当有多个输入框时，只要通过input唯一的id值为所有输入框分别绑定virtualkeyboard方法。因为页面的焦点只会有一个，所以也不会相互影响。

如图3所示，本虚拟键盘复用的方法包括步骤：可不做任何改变直接把virtualkeyboard.js和virtualkeyboard.css文件复制到需要用到虚拟键盘的项目文件目录下，并且引入这两个文件；然后在重复执行上述步骤s2和s3，即在项目文件中引入jquery.min.js，为项目中需要键盘输入的input元素绑定virtualkeyboard方法。

本发明实施例的一种基于javascript的可复用虚拟键盘实现系统，包括：

编写模块，用于编写虚拟键盘js文件和虚拟键盘css文件，所述虚拟键盘js文件用于定义虚拟键盘函数，所述虚拟键盘函数用来绘制虚拟键盘外形、实现虚拟键盘输入功能、以及控制虚拟键盘唤醒和隐藏，所述虚拟键盘css文件用于配合绘制虚拟键盘外形及定义虚拟键盘样式；

引入模块，用于在待实现虚拟键盘功能的项目中通过script标签引入所述虚拟键盘js文件和jquery库，并且还通过link标签引入所述虚拟键盘css文件；

关联模块，用于为待实现虚拟键盘功能的项目中的输入框元素绑定所述虚拟键盘函数。

优选的，编写模块用于实现步骤：

s11，创建虚拟键盘js文件，为jquery的原型添加虚拟键盘函数对象，创建虚拟键盘css文件；

s12，在所述虚拟键盘函数中定义虚拟键盘外形、虚拟键盘输入按键、和虚拟键盘隐藏按键，在所述虚拟键盘css文件中配合绘制虚拟键盘外形及定义虚拟键盘样式的代码；

s13，在所述虚拟键盘函数内部定义词典对象；

s14，在所述虚拟键盘js文件中为所有虚拟键盘按键绑定click事件。

优选的，所述步骤s12包括子步骤：

在所述虚拟键盘函数中新增类名为虚拟键盘的块级元素，该块级元素用作键盘容器，在所述虚拟键盘css文件中配合绘制虚拟键盘外形，在所述虚拟键盘函数中为虚拟键盘添加虚拟键盘隐藏按键；

在虚拟键盘的块级元素中新建类名为输出区的块级元素，该块级元素用于点击虚拟键盘输入按键时，显示和选择文字；

在输出区的块级元素下面添加类名为输入区的块级元素，该块级元素用于键盘输入按键的容器，并在容器内部用无序列表标签配合所述虚拟键盘css文件绘制虚拟键盘输入按键。

可复用虚拟键盘实现系统实现原理、技术效果与上述方法类似，此处不再赘述。

本发明实施例还提供一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行以实现上述任一可复用虚拟键盘实现方法实施例的技术方案。其实现原理、技术效果与上述方法类似，此处不再赘述。

必须说明的是，上述任一实施例中，方法并不必然按照序号顺序依次执行，只要从执行逻辑中不能推定必然按某一顺序执行，则意味着可以以其他任何可能的顺序执行。

本领域的技术人员容易理解，以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。