当前位置： 首页 > news >正文

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

news 2026/2/8 9:57:48

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

一个插件可以解决这个问题，关键还支持高度自定义（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文件夹。

相关文章：

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

如何在触摸设备上为输入域添加虚拟键盘&#xff1f; 一个插件可以解决这个问题&#xff0c;关键还支持高度自定义&#xff08;git地址&#xff09;&#xff1a; GitHub - Mottie/Keyboard: Virtual Keyboard using jQuery ~ 官网地址&#xff1a;Virtual Keyboard 使用步骤&…...

编程日记 2024/7/9 16:10:00

面试题07-09

知道了 InnoDB 的索引实现后&#xff0c;就很容易明白为什么不建议使用过长的字段作为主键&#xff0c;因为所有辅助索引都引用主索引&#xff0c;过长的主索引会令辅助索引变得过大。再例如&#xff0c;用非单调的字段作为主键在 InnoDB 中不是个好主意&#xff0c;因为 InnoD…...

编程日记 2024/7/9 16:08:59

MySQL之binlog日志

原文链接&#xff1a;https://zhuanlan.zhihu.com/p/697078870 目录&#xff1a; binlog 是什么binlog 配置和查看binlog 的类型binlog 如何恢复数据binlog 是逻辑日志还是物理日志binlog 作用 注意&#xff1a;以下所有的操作都在 MySQL 8.0 版本实现。 1、binlog 是什么 …...

编程日记 2024/7/9 16:07:58

【大数据】什么是数据湖？一文揭示数据湖的本质

很多人跟我一样&#xff0c;对于数据湖充满好奇&#xff0c;也许还读了不少数据湖文章&#xff0c;但无论别人怎么说&#xff0c;你还是会觉得难以把握数据湖的本质。 有些人会望文生义说&#xff0c;数据湖嘛&#xff0c;就是什么东西都可以往里面扔&#xff0c;特别是对非结构…...

编程日记 2024/7/9 16:05:55

CSS【详解】文本相关样式（含 font 系列，文本排版，文本装饰，分散对齐，渐变色文本等）

文本风格 font-style font-style:italic 值描述normal默认值。浏览器显示一个标准的字体样式。italic加载对应字体的斜体字体文件&#xff0c;若找不到斜体字体文件&#xff0c;则进行物理上的倾斜。 标签默认font-style:italicoblique浏览器会显示一个倾斜的字体样式。 文本粗…...

编程日记 2024/7/9 16:04:54

加油卡APP系统开发，优惠加油收益

目前&#xff0c;汽车已经成为了不可或缺的出行工具&#xff0c;汽车加油更是成为了家家户户要做的事。不过随着油价的波动&#xff0c;车主急需能够进行优惠加油的渠道&#xff0c;因此&#xff0c;加油卡APP成为了大众汽车加油新的选择方式&#xff0c;用户在下载APP后即可享…...

编程日记 2024/7/9 16:03:53

el-scrollbar实现自动滚动到底部（AI聊天）

目录 项目背景 实现步骤 实现代码 完整示例代码 项目背景 chatGPT聊天消息展示滚动面板&#xff0c;每次用户输入提问内容或者ai进行流式回答时需要不断的滚动到底部确保展示最新的消息。 实现步骤 采用element ui 的el-scrollbar作为聊天消息展示组件。 通过操作dom来实…...

编程日记 2024/7/9 16:02:52

开源去除背景的项目：rembg 安装和部署

下载colne项目代码 git clone https://github.com/danielgatis/rembg.git安装依赖 pip install rembg pip install click pip install filetype pip install watchdog pip install aiohttp pip install gradio pip install asyncer测试使用 rembg i 照片.jpg zhaopian.jpg照…...

编程日记 2024/7/9 16:01:51

Docker 使用基础（1）—镜像仓库

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;秒針を噛む—ずっと真夜中でいいのに。 0:34━━━━━━️&#x1f49f;──────── 4:20 &#x1f504; ◀️ ⏸ …...

编程日记 2024/7/9 15:59:48

Git详细安装和使用教程

文章目录 准备工作-gitee注册认识及安装GitGit配置用户信息本地初始化Git仓库记录每次更新到仓库查看及切换历史版本Git忽略文件和查看文件状态Git分支-查看及切换Git分支-创建分支Git分支-合并及删除分支Git分支-命令补充Git分支-冲突需求: 准备工作-gitee注册 传送门: gite…...

编程日记 2024/7/9 15:58:47

LeetCode题练习与总结：反转字符串中的单词--151

一、题目描述 给你一个字符串 s &#xff0c;请你反转字符串中 单词 的顺序。 单词 是由非空格字符组成的字符串。s 中使用至少一个空格将字符串中的 单词 分隔开。 返回 单词 顺序颠倒且 单词 之间用单个空格连接的结果字符串。 注意&#xff1a;输入字符串 s中可能会存在…...

编程日记 2024/7/9 15:56:44

2.pwn的linux基础（计算机内部数据结构存储形式）

linux基础 保护层级: 分为四个ring0-ring3 一般来说就两个&#xff0c;0和3 0为内核 3为用户 权限: 用户分为多个组 文件和目录等等的权限一般都是三个&#xff0c;即可读可写可执行。 读:R&#xff0c;写:W&#xff0c;执行:X 赋予一个可执行文件执行权限就是chmod x file…...

编程日记 2024/7/9 15:55:43

67.SAP FICO-凭证类型学习

目录 SAP凭证类型 凭证类型的作用 - OBA7 SAP默认的凭证类型更改 FI相应事务代码默认凭证类型 - OBU1 对FB50、60、70默认凭证类型的更改 - OBZO 后勤货物移动默认凭证类型 - OMBA 发货凭证类型 收货凭证类型 自动移动凭证类型 存货盘点凭证类型 发票默认的凭证类…...

编程日记 2024/7/9 15:54:42

井字游戏00

题目链接 井字游戏 题目描述 注意点 1 < board.length board[i].length < 100输入一定遵循井字棋规则 解答思路 如果某一方想要获胜&#xff0c;则其需要占满某一行或某一列或对角线&#xff0c;所以只需要根据第一行和第一列判断是否填充完某一行或某一列或对角线…...

编程日记 2024/7/9 15:50:36

GEE代码实例教程详解：地表温度与土地覆盖类型分析

简介 在本篇博客中&#xff0c;我们将使用Google Earth Engine (GEE) 对地表温度数据进行分析&#xff0c;并探究不同土地覆盖类型&#xff08;特别是水体和城市区域&#xff09;的地表温度变化。通过MODIS数据集&#xff0c;我们可以监测2001年至2024年间的数据。 背景知识 …...

编程日记 2024/7/9 15:47:33

RK3568------Openharmony 4.0-Release 浏览器部署安装

RK3568------Openharmony 4.0-Release 浏览器部署安装 文章目录 RK3568------Openharmony 4.0-Release 浏览器部署安装前言一、DevEco Studio开发工具安装与使用二、浏览器(Browser)样例代码编译三 、浏览器(Browser)部署四、遇到的问题五、效果展示总结 前言 上一篇文章讲解了…...

编程日记 2024/7/9 15:45:31

【kafka】可视化工具cmak（原kafka-manager）安装问题解决

众所周知&#xff08;反正不管你知不知道&#xff09;&#xff0c;kafka-maneger更名了&#xff0c;现在叫cmak&#xff01;原因是什么呢&#xff1f;据不可靠小道信息说&#xff0c;原kafka-manager这个名字涉及到kafka商标使用问题&#xff0c;应该是被律师函警告了&#xff…...

编程日记 2024/7/9 15:44:30

【转载】目标检测mAP的含义

转载自三叔家的猫 https://blog.csdn.net/qq_39056987 https://blog.csdn.net/qq_39056987/article/details/104348493 <div id"content_views" class"markdown_views prism-atom-one-light"><svg xmlns"http://www.w3.org/2000/svg" s…...

编程日记 2024/7/9 15:43:28

智慧校园行政办公-红头文件功能概述

在智慧校园的行政办公系统中&#xff0c;红头文件的管理功能是一项重要的组成部分&#xff0c;它极大地提升了文件处理的效率与规范性。该功能围绕文件的创建、审批、归档等关键环节&#xff0c;进行了全面的数字化改造。 首先&#xff0c;系统内置了多种标准化的红头文件模板&…...

编程日记 2024/7/9 15:42:27

汽车IVI中控开发入门及进阶（三十三）：i.MX linux开发之开发板

前言： 大部分物料/芯片，不管MCU 还是SoC，都会有原厂提供配套开发板，有这样一个使用原型，在遇到问题时或者进行开发时可以使用。 i.MX 8QuadXPlus MEK board： 1、要测试display显示器，可使用i.MX mini SAS将“LVDS1_CH0”端口连接到LVDS到HDMI适配器的cable。 2、要测试…...

编程日记 2024/7/9 15:40:25

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2026/1/27 3:40:30

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/12/15 1:34:37

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2026/2/2 2:47:37

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2026/1/20 21:59:36

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/9/27 12:03:43

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/12/20 18:09:59

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2026/1/30 3:27:35

LRU 缓存机制详解与实现（Java版） + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...

编程新知 2025/11/28 20:47:33

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

编程新知 2025/10/2 19:46:59