触摸屏虚拟键盘组件 jQuery Virtual Keyboard使用 自定义键盘

如何在触摸设备上为输入域添加虚拟键盘?

一个插件可以解决这个问题,关键还支持高度自定义(git地址):

GitHub - Mottie/Keyboard: Virtual Keyboard using jQuery ~

官网地址:Virtual Keyboard

使用步骤:

1. 下载相关资源

文件夹如下所示:

2. 修改例子

我的需求相对简单,就是需要一个输入纯数字的键盘,那么我将基于basic文件进行修改。

代码示例如下:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>虚拟键盘</title><!-- 引入jquery --><script src="js/jquery-latest.min.js"></script><!-- 引入自定义样式 --><link href="../css/keyboard1.css" rel="stylesheet"><!-- 引入键盘 --><script src="../js/jquery.keyboard.js"></script><script>$(function(){$('#keyboard').keyboard({layout: 'custom', // 自定义布局usePreview: false, customLayout: {'normal' : ['7 8 9','4 5 6','1 2 3','0 {bksp}']},autoAccept: true, // 自动输入到input中language: 'zh', // 中文display: {'bksp': '删除' // 需要把对应的按钮设置为中文},});});</script>
</head>
<body><div id="wrap"> <input id="keyboard" type="text"></div></body>
</html>

样式可以自定义,这里不再附上。

具体显示为:

同时支持高度自定义键盘,只需要在 customLayout 定义即可;

比如

customLayout: {'default' : ['{rad} {deg} {grad} {sp:.1} {MC} {MR} {MS} {MPLUS} {M-} {a}','{meta1} {ln} ( ) {b} {clear} {clearall} {sign} {sqrt} {c}','{sinh} {sin} {x2} {n!} 7 8 9 / %','{cosh} {cos} {xy} {yroot} 4 5 6 * {invx}','{tanh} {tan} {x3} {cuberoot} 1 2 3 - {equals}','{pi} {Int} {mod} {log} {10x} 0 {dec} +'],'meta1' : ['{rad} {deg} {grad} {sp:.1} {MC} {MR} {MS} {MPLUS} {M-} {a}','{meta1} {ex} ( ) {b} {clear} {clearall} {sign} {sqrt} {c}','{asinh} {asin} {x2} {n!} 7 8 9 / %','{acosh} {acos} {xy} {yroot} 4 5 6 * {invx}','{atanh} {atan} {x3} {cuberoot} 1 2 3 - {equals}','{2pi} {Int} {mod} {log} {10x} 0 {dec} +']},

更多案例可查看docs文件夹。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/372900.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Node.js 生成vue组件

在项目根目录下创建 create.js /*** 脚本生成vue组件* 主要是利用node自带的fs模块操作文件的写入* ===========================================* 准备步骤:* 1.输入作者名* 2.输入文件名* 3.输入菜单名* 4.输入文件地址* ============================================* 操…

【技术追踪】DiffuMatting:使用抠图级别注释合成任意对象(ECCV-2024)

万物生&#xff1a;Diffusion与绿幕抠图&#xff0c;影视领域的福音~ 论文&#xff1a;DiffuMatting: Synthesizing Arbitrary Objects with Matting-level Annotation 代码&#xff1a;https://github.com/HUuxiaobin/DiffuMatting &#xff08;即将开源&#xff09; 0、摘要 …

springboot煤炉网站代切系统-计算机毕业设计源码06656

目 录 摘要 1 绪论 1.1 课题目的与意义 1.2国内外研究现状 1.3论文结构与章节安排 1.4 Springboot框架介绍 2 Springboot煤炉网站代切系统系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 操作可行性分析 2.2 系统功能分析 2.2.1 功能性…

生成随机密码

生成8位无重复的密码&#xff08;可以包含数字、大小写字母&#xff09; import random import string character string.digits string.ascii_letters password .join(random.sample(character, 8)) print(f"生成的随机密码为:{password}")

【Spring Boot】Spring AOP中的环绕通知

目录 一、什么是AOP?二、AOP 的环绕通知2.1 切点以及切点表达式2.2 连接点2.3 通知&#xff08;Advice&#xff09;2.4 切面(Aspect)2.5 不同通知类型的区别2.5.1 正常情况下2.5.2异常情况下 2.6 统一管理切点PointCut 一、什么是AOP? Aspect Oriented Programming&#xff…

Leetcode - 133双周赛

目录 一&#xff0c;3206. 交替组 I 二&#xff0c;3207. 与敌人战斗后的最大分数 三&#xff0c;3208. 交替组 II 四&#xff0c;3209. 子数组按位与值为 K 的数目 一&#xff0c;3206. 交替组 I 直接暴力&#xff0c;代码如下&#xff1a; class Solution {public int n…

【前端项目笔记】9 数据报表

数据报表 效果展示&#xff1a; 在开发代码之前新建分支 git checkout -b report 新建分支report git branch 查看分支 git push -u origin report 将本地report分支推送到云端origin并命名为report 通过路由的形式将数据报表加载到页面中 渲染数据报表基本布局 面包屑导航…

迭代器模式(大话设计模式)C/C++版本

迭代器模式 C #include <iostream> #include <string> #include <vector>using namespace std;// 迭代抽象类,用于定义得到开始对象、得到下一个对象、判断是否到结尾、当前对象等抽象方法&#xff0c;统一接口 class Iterator { public:Iterator(){};virtu…

Miniconda的常见用法——以Isaacgym为例

1. ubuntu24.04安装minicondda mkdir -p ~/miniconda3 wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh -O ~/miniconda3/miniconda.sh解释下这段代码 bash ~/miniconda3/miniconda.sh -b -u -p ~/miniconda3~/miniconda3/miniconda.sh: 指向Mi…

宝塔面板运行Admin.net框架

准备 宝塔安装 .netcore安装 Admin.net框架发布 宝塔面板设置 完结撒花 1.准备 服务器/虚拟机一台 系统Windows server / Ubuntu20.04&#xff08;本贴使用的是Ubuntu20.04版本系统&#xff09; Admin.net开发框架 先安装好服务器系统&#xff0c;这里就不做安装过程描述了&…

ATA-8035射频功率放大器在声动力疗法中的应用

声动力疗法是一种基于声波能量的治疗方法&#xff0c;广泛应用于医疗和美容领域。它利用高强度聚焦的声波来实现切割、破碎或加热组织&#xff0c;以治疗各种疾病和美容问题。在声动力疗法中&#xff0c;射频功率放大器起着至关重要的作用&#xff0c;它负责提供足够的能量来激…

☺初识c++(语法篇)☺

目录 一命名空间&#xff08;namespace&#xff09;&#xff1a; 二cout与cin简述&#xff1a; 三缺省参数&#xff1a; 四函数重载&#xff1a; 五引用&#xff1a; 六内联函数: 七c中的nullptr简述&#xff1a; 一命名空间&#xff08;namespace&#xff09;&#xff1…

聚焦云技术,探讨 AGI 时代的云原生数据计算系统

6月22日&#xff0c;开源中国社区在上海举办了 OSC 源创会活动&#xff0c;本期活动以「云技术」为主题&#xff0c;邀请了来自华为 openEuler、字节跳动、AutoMQ 等厂商的技术大咖进行分享&#xff0c;拓数派作为云原生数据计算领域的引领者&#xff0c;受邀参与了本次活动&am…

【IMU】 温度零偏标定

温度标定 IMU的零偏随着温度的变化而变化&#xff0c;在全温范围内形状各异&#xff0c;有些可能是单调的&#xff0c;有些可能出现拐点。 多项式误差温度标定 目的是对估计的参数进行温度补偿&#xff0c;获取不同温度时的参数值&#xff08;零偏、尺度、正交&#xff09;&…

Study--Oracle-06-Oracler网络管理

一、ORACLE的监听管理 1、ORACLE网络监听配置文件 cd /u01/app/oracle/product/12.2.0/db_1/network/admin 2、在Oracle数据库中&#xff0c;监听器&#xff08;Listener&#xff09;是一个独立的进程&#xff0c;它监听数据库服务器上的特定端口上的网络连接请求&#xff0c…

HTML5表单的自动验证、取消验证、自定义错误信息

1、自动验证 通过在元素中使用属性的方法&#xff0c;该属性可以实现在表单提交时执行自动验证的功能。下面是关于对元素内输入内容进行限制的属性的指定。 属性说明required输入内容是否不为空pattern输入的内容是否符合指定格式min、max输入的数值是否在min~max范围step判断…

【机器学习】基于密度的聚类算法:DBSCAN详解

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 基于密度的聚类算法&#xff1a;DBSCAN详解引言DBSCAN的基本概念点的分类聚类过…

计算机图形学入门24:材质与外观

1.前言 想要得到一个漂亮准确的场景渲染效果&#xff0c;不只需要物理正确的全局照明算法&#xff0c;也要了解现实中各种物体的表面外观和在图形学中的模拟方式。而物体的外观和材质其实就是同一个意思&#xff0c;不同的材质在光照下就会表现出不同的外观&#xff0c;所以外观…

idea推送到gitee 401错误

在idea上推送时遇到这样的问题&#xff0c;解决方法如下&#xff1a; 在https://的后面加上 用户名:密码 然后再提交就ok啦&#xff01;

在vue3中,手写父子关联,勾选子级父级关联,取消只取消当前子级,父节点不动

树形控件选择子级勾选父级&#xff0c;以及所有子级&#xff0c; 取消勾选仅取消子级 在项目中&#xff0c;可能会遇到这种场景&#xff0c;比如权限配置的时候&#xff0c;页面权限和菜单权限以tree的形式来配置&#xff0c;而且不用半选&#xff0c;菜单在页面的下面&#xf…