触摸屏虚拟键盘组件 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文件夹。
相关文章：
触摸屏虚拟键盘组件 jQuery Virtual Keyboard使用 自定义键盘
如何在触摸设备上为输入域添加虚拟键盘？ 一个插件可以解决这个问题，关键还支持高度自定义（git地址）： GitHub - Mottie/Keyboard: Virtual Keyboard using jQuery ~ 官网地址：Virtual Keyboard 使用步骤&…...
面试题07-09
知道了 InnoDB 的索引实现后，就很容易明白为什么不建议使用过长的字段作为主键，因为所有辅助索引都引用主索引，过长的主索引会令辅助索引变得过大。再例如，用非单调的字段作为主键在 InnoDB 中不是个好主意，因为 InnoD…...
MySQL之binlog日志
原文链接：https://zhuanlan.zhihu.com/p/697078870 目录： binlog 是什么binlog 配置和查看binlog 的类型binlog 如何恢复数据binlog 是逻辑日志还是物理日志binlog 作用 注意：以下所有的操作都在 MySQL 8.0 版本实现。 1、binlog 是什么 …...
【大数据】什么是数据湖？一文揭示数据湖的本质
很多人跟我一样，对于数据湖充满好奇，也许还读了不少数据湖文章，但无论别人怎么说，你还是会觉得难以把握数据湖的本质。 有些人会望文生义说，数据湖嘛，就是什么东西都可以往里面扔，特别是对非结构…...
CSS【详解】文本相关样式（含 font 系列，文本排版，文本装饰，分散对齐，渐变色文本等）
文本风格 font-style font-style:italic 值描述normal默认值。浏览器显示一个标准的字体样式。italic加载对应字体的斜体字体文件，若找不到斜体字体文件，则进行物理上的倾斜。 标签默认font-style:italicoblique浏览器会显示一个倾斜的字体样式。 文本粗…...
加油卡APP系统开发，优惠加油收益
目前，汽车已经成为了不可或缺的出行工具，汽车加油更是成为了家家户户要做的事。不过随着油价的波动，车主急需能够进行优惠加油的渠道，因此，加油卡APP成为了大众汽车加油新的选择方式，用户在下载APP后即可享…...
el-scrollbar实现自动滚动到底部（AI聊天）
目录 项目背景 实现步骤 实现代码 完整示例代码 项目背景 chatGPT聊天消息展示滚动面板，每次用户输入提问内容或者ai进行流式回答时需要不断的滚动到底部确保展示最新的消息。 实现步骤 采用element ui 的el-scrollbar作为聊天消息展示组件。 通过操作dom来实…...
开源去除背景的项目：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照…...
Docker 使用基础（1）—镜像仓库
🎬慕斯主页：修仙—别有洞天 ♈️今日夜电波：秒針を噛む—ずっと真夜中でいいのに。 0:34━━━━━━️💟──────── 4:20 🔄 ◀️ ⏸ …...
Git详细安装和使用教程
文章目录 准备工作-gitee注册认识及安装GitGit配置用户信息本地初始化Git仓库记录每次更新到仓库查看及切换历史版本Git忽略文件和查看文件状态Git分支-查看及切换Git分支-创建分支Git分支-合并及删除分支Git分支-命令补充Git分支-冲突需求: 准备工作-gitee注册 传送门: gite…...
LeetCode题练习与总结：反转字符串中的单词--151
一、题目描述 给你一个字符串 s ，请你反转字符串中 单词 的顺序。 单词 是由非空格字符组成的字符串。s 中使用至少一个空格将字符串中的 单词 分隔开。 返回 单词 顺序颠倒且 单词 之间用单个空格连接的结果字符串。 注意：输入字符串 s中可能会存在…...
2.pwn的linux基础（计算机内部数据结构存储形式）
linux基础 保护层级: 分为四个ring0-ring3 一般来说就两个，0和3 0为内核 3为用户 权限: 用户分为多个组 文件和目录等等的权限一般都是三个，即可读可写可执行。 读:R，写:W，执行:X 赋予一个可执行文件执行权限就是chmod x file…...
67.SAP FICO-凭证类型学习
目录 SAP凭证类型 凭证类型的作用 - OBA7 SAP默认的凭证类型更改 FI相应事务代码默认凭证类型 - OBU1 对FB50、60、70默认凭证类型的更改 - OBZO 后勤货物移动默认凭证类型 - OMBA 发货凭证类型 收货凭证类型 自动移动凭证类型 存货盘点凭证类型 发票默认的凭证类…...
井字游戏00
题目链接 井字游戏 题目描述 注意点 1 < board.length board[i].length < 100输入一定遵循井字棋规则 解答思路 如果某一方想要获胜，则其需要占满某一行或某一列或对角线，所以只需要根据第一行和第一列判断是否填充完某一行或某一列或对角线…...
GEE代码实例教程详解：地表温度与土地覆盖类型分析
简介 在本篇博客中，我们将使用Google Earth Engine (GEE) 对地表温度数据进行分析，并探究不同土地覆盖类型（特别是水体和城市区域）的地表温度变化。通过MODIS数据集，我们可以监测2001年至2024年间的数据。 背景知识 …...
RK3568------Openharmony 4.0-Release 浏览器部署安装
RK3568------Openharmony 4.0-Release 浏览器部署安装 文章目录 RK3568------Openharmony 4.0-Release 浏览器部署安装前言一、DevEco Studio开发工具安装与使用二、浏览器(Browser)样例代码编译三 、浏览器(Browser)部署四、遇到的问题五、效果展示总结 前言 上一篇文章讲解了…...
【kafka】可视化工具cmak（原kafka-manager）安装问题解决
众所周知（反正不管你知不知道），kafka-maneger更名了，现在叫cmak！原因是什么呢？据不可靠小道信息说，原kafka-manager这个名字涉及到kafka商标使用问题，应该是被律师函警告了ÿ…...
【转载】目标检测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…...
智慧校园行政办公-红头文件功能概述
在智慧校园的行政办公系统中，红头文件的管理功能是一项重要的组成部分，它极大地提升了文件处理的效率与规范性。该功能围绕文件的创建、审批、归档等关键环节，进行了全面的数字化改造。 首先，系统内置了多种标准化的红头文件模板&…...
汽车IVI中控开发入门及进阶（三十三）：i.MX linux开发之开发板
前言： 大部分物料/芯片，不管MCU 还是SoC，都会有原厂提供配套开发板，有这样一个使用原型，在遇到问题时或者进行开发时可以使用。 i.MX 8QuadXPlus MEK board： 1、要测试display显示器，可使用i.MX mini SAS将“LVDS1_CH0”端口连接到LVDS到HDMI适配器的cable。 2、要测试…...
uniapp 对接腾讯云IM群组成员管理（增删改查）
UniApp 实战：腾讯云IM群组成员管理（增删改查） 一、前言 在社交类App开发中，群组成员管理是核心功能之一。本文将基于UniApp框架，结合腾讯云IM SDK，详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？
一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：
在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档，…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码，写上注释 当然可以！这段代码是 Qt …...
Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的，比GNOME简单得多！ 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课，做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程，它的核心机制是 Goroutine 协程、Channel 通道，并基于CSP（Communicating Sequential Processes࿰…...
【AI学习】三、AI算法中的向量
在人工智能（AI）算法中，向量（Vector）是一种将现实世界中的数据（如图像、文本、音频等）转化为计算机可处理的数值型特征表示的工具。它是连接人类认知（如语义、视觉特征）与…...
C++.OpenGL （14/64）多光源（Multiple Lights）
多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数（函数作为参数、返回值） 三、匿名函数与闭包1. 匿名函数（Lambda函…...
七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...