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

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

news 2026/3/29 8:36:46

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

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

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

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

面试题07-09

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

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

MySQL之binlog日志

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

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

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

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

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

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

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

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

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

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

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

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

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

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

下载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）—镜像仓库

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

编程日记 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 ，请你反转字符串中单词的顺序。单词是由非空格字符组成的字符串。s 中使用至少一个空格将字符串中的单词分隔开。返回单词顺序颠倒且单词之间用单个空格连接的结果字符串。注意：输入字符串 s中可能会存在…...

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

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

linux基础保护层级: 分为四个ring0-ring3 一般来说就两个，0和3 0为内核 3为用户权限: 用户分为多个组文件和目录等等的权限一般都是三个，即可读可写可执行。读:R，写:W，执行: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输入一定遵循井字棋规则解答思路如果某一方想要获胜，则其需要占满某一行或某一列或对角线，所以只需要根据第一行和第一列判断是否填充完某一行或某一列或对角线…...

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

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

简介在本篇博客中，我们将使用Google Earth Engine (GEE) 对地表温度数据进行分析，并探究不同土地覆盖类型（特别是水体和城市区域）的地表温度变化。通过MODIS数据集，我们可以监测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）安装问题解决

众所周知（反正不管你知不知道），kafka-maneger更名了，现在叫cmak！原因是什么呢？据不可靠小道信息说，原kafka-manager这个名字涉及到kafka商标使用问题，应该是被律师函警告了&#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

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

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

编程日记 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

WarcraftHelper：魔兽争霸3兼容性问题的全方位解决方案

WarcraftHelper：魔兽争霸3兼容性问题的全方位解决方案【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 问题发现：现代系统下的经…...

编程新知 2026/3/29 7:55:32