触摸屏虚拟键盘组件 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、要测试…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中，拉取视频流只要求udp方式，从2016开始要求新增支持tcp被动和tcp主动两种方式，udp理论上会丢包的，所以实际使用过程可能会出现画面花屏的情况，而tcp肯定不丢包，起码…...
无法与IP建立连接，未能下载VSCode服务器
如题，在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈，发现是VSCode版本自动更新惹的祸！！！ 在VSCode的帮助->关于这里发现前几天VSCode自动更新了，我的版本号变成了1.100.3 才导致了远程连接出…...
多种风格导航菜单 HTML 实现（附源码）
下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
uniapp手机号一键登录保姆级教程（包含前端和后端）
目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号（第三种）后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...
Go语言多线程问题
打印零与奇偶数（leetcode 1116） 方法1：使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...
解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域，无损检测（NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统，以非接触式光学麦克风技术为核心，打破传统检测瓶颈，为半导体、航空航天、汽车制造等行业提供了高灵敏…...
系统掌握PyTorch：图解张量、Autograd、DataLoader、nn.Module与实战模型
本文较长，建议点赞收藏，以免遗失。更多AI大模型应用开发学习视频及资料，尽在聚客AI学院。 本文通过代码驱动的方式，系统讲解PyTorch核心概念和实战技巧，涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...
认识CMake并使用CMake构建自己的第一个项目
1.CMake的作用和优势 跨平台支持：CMake支持多种操作系统和编译器，使用同一份构建配置可以在不同的环境中使用 简化配置：通过CMakeLists.txt文件，用户可以定义项目结构、依赖项、编译选项等，无需手动编写复杂的构建脚本…...
QT开发技术【ffmpeg + QAudioOutput】音乐播放器
一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下，音视频内容犹如璀璨繁星，点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频，到在线课堂中知识渊博的专家授课，再到影视平台上扣人心弦的高清大片，音…...
二维FDTD算法仿真
二维FDTD算法仿真，并带完全匹配层，输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...