Jquery实现软键盘

屏幕键盘也称虚拟键盘,是一种非常实用的工具,可以让那些有移动障碍的用户用指针设备或游戏杆输入数据。它旨在为那些有移动障碍的用户提供最低级别的功能。

屏幕键盘在网络生活中很常见,比如使用网银或在线查询信用卡余额,在输入密码等敏感数据时,应该就会用到屏幕键盘。以防止被木马或恶意程序捕获盗取实际键盘上的操作。

今天推荐两款jquery实现的软键盘插件。

1、Keyboard-master

      它包括多种按键布局,完全支持自定义,可以更改按键布局和配色方案。它就像Windows的辅助键盘,可用来提高网站的可用性。

下载地址:https://github.com/Mottie/Keyboard

2、网上下载的一个插件

代码简单,布局漂亮,如果要做一些简单的应用,可以在该插件的基础上进行调整。

下载地址:http://yunpan.cn/Q7qmxK2Pmw2VZ (提取码:851e)

时间: 2024-10-13 03:22:09

Jquery实现软键盘的相关文章

基于jQuery的软键盘

前些天写了一个基于基于jQuery的数字键盘,今天给大家带来一个基于jQuery的全字母键盘插件(支持全字母大小写切换,数字输入,退格清除,关闭功能,可调整大小和键盘位置(可设置固定在屏幕右下角),支持鼠标和触屏拖动,并且特意保留了四个常用字符"_","-",".","/".还有按键记忆功能哦,可自动改变使用频繁按键的背景颜色.). 在线演示 效果截图: 页面效果参照PolarBear的使用CSS3制作的苹果风格键盘 修改而成

jQuery软键盘插件

1.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head&

[Phonegap+Sencha Touch] 移动开发24 打包wp8.1的App,运行时输入框聚焦弹出软键盘之后,界面上移而不恢复原位的解决办法

这个现象只出现在phonegap打包sencha touch的wp8.1程序会出现(仅wp8.1,wp8正常),其它js框架我测试了几个(app framework, jquery mobile),好像没有这个问题. 我来描述一下这个现象: 1.运行phonegap打包的wp8程序,打开一个有输入框的界面,如下图: 2.点击输入框,使其弹出软键盘,界面会上移,如下图: 3.点返回键隐藏软键盘(或者点击界面上其它地方隐藏软键盘),此时界面不恢复原位,如下图: 我的一些研究结果: 1.这种现象只出现

禁止移动端input弹出软键盘

在做三级联动,或者一些时间插件的时候总是弹出软键盘,用下面的方法就可以禁用掉,废话不多说直接上代码. HTML代码 <div class=""> <div> <input type="text" id="disable1" class="" placeholder=""/> </div> <div> <input type="tex

基于jQuery的数字键盘插件

有时,我们需要在网页上使用软键盘.今天,就给大家带来一个基于jQuery的数字键盘插件,除了jQuery,不需要依赖任何文件资源.纯数字键盘,有退格,有清除,不支持输入小数(需要的可以自己改一下,主要是多个小数点就有13个键,不好排列了,呵呵).支持鼠标拖动和触摸拖动,可关闭. 在线演示 1.页面代码 <ul> <li><input type="text" placeholder="手机号码后四位" id="numkeyboa

软键盘实例 request参数修改

软键盘实例 request参数修改 这里的键盘 里面的内容是乱序的,每次请求都会不一样的顺序. 键盘内容是一个DIV的背景图,方框是DIV边框.控制按钮直接在前台控制就行. 请求流程如下 JSP请求软键盘图片->action 绘制图片并记录 每个值对应的位置 JSP登录(密码位置)-->Filter把密码转换成真实密码值->登录校验Filter 代码如下 <%@ page isELIgnored="false" %> <%@ page languag

[Phonegap+Sencha Touch] 移动开发24 包wp8.1的App,弹出软键盘输入框聚焦实施后,无移动采收率方法来解决接口

这种现象不仅是现在显示phonegap包sencha touch的wp8.1该程序将出现(只wp8.1,wp8正常).其他js我测试了几个框架(app framework, jquery mobile),好像没有这个问题. 我来描写叙述一下这个现象: 1.执行phonegap打包的wp8程序,打开一个有输入框的界面,例如以下图: 2.点击输入框,使其弹出软键盘.界面会上移.例如以下图: 3.点返回键隐藏软键盘(或者点击界面上其他地方隐藏软键盘),此时界面不恢复原位.例如以下图: 我的一些研究结果

ios safari input fixed 软键盘里的爱恨情仇

请看第一题: 为什么我的input获取焦点后,被输入法遮住了. 解决办法: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.1.0.js"></script> <style&g

前端angularJS利用directive实现移动端自定义软键盘的方法

最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后的效果: 实现的效果就是当点击页面中需要弹出软键盘的时候软键盘弹出,浮在页面的中间,和模态框一样的效果,可以在软键盘中输入任何数字,附带的功能有小数点.退格.清空.确定等功能.当在键盘上点击数字的时候页面中的表单中实时的添加对应的数字,上图中可以看到. 产品经理那边给的原因是iPad屏幕本来就小,如