★ FEATURED ARTICLE 简介VirtualKeyboard 是一款基于 jQuery UI 的虚拟键盘插件面向需要在网页表单中增强输入安全性与交互体验的前端开发者尤其适合触摸屏设备、密码输入等对键盘记录器防护有要求的场景。插件提供字母、数字、符号等完整键盘布局兼容 jQuery UI 多主题支持自定义按键顺序与特殊字符并针对移动端做了触摸优化可通过初始化选项与 open/close/show/hide 等 API 灵活控制显示与行为。资源以 zip 压缩包形式提供包内文件总数暂未统计整体约 1.27MB主要包含插件所需的 CSS 样式与 JavaScript 脚本文件用于引入布局主题和实现键盘逻辑。目前已有 297 人学习下载适合希望快速集成虚拟键盘、参考主题定制与布局扩展思路的开发者查阅使用。1. 虚拟键盘不是花架子从触屏输入到安全输入的落地场景第一次在收银一体机上看到屏幕里弹出一块虚拟键盘我以为是前端偷懒没做物理键盘适配。直到自己接手一个自助终端项目才发现物理键盘在 kiosk 场景里根本不该出现——用户没有地方放键盘机身也没有预留接口。VirtualKeyboard 这个基于 jQuery UI 的插件解决的正是这类「输入设备不可控」场景下的表单输入问题。它把 QWERTY、数字、方向键等布局渲染成 DOM 元素挂到指定输入框上点击即输入支持多语言布局切换和自定义按键。适合做自助机、工控面板、展厅互动屏、以及需要屏蔽物理键盘的受限输入环境。这篇笔记按「它怎么跑起来 → 布局和事件怎么配 → 哪里会翻车」的顺序拆源码包和示例页都在文末给出获取方式。2. 把插件跑起来目录结构、依赖顺序与最小初始化2.1 先看清依赖链jQuery、jQuery UI 与插件本体这个插件不是「引入一个 js 就完事」的类型。它的定位是 jQuery UI 的扩展组件内部用到了 jQuery UI 的 widget 工厂、定位工具和部分主题样式。所以引入顺序必须是jQuery 核心 → jQuery UI 核心至少包含 widget 和 position 模块→ 键盘插件本体 → 键盘主题 CSS。顺序错了控制台第一句报错通常是$(...).keyboard is not a function很多人以为是路径写错其实是 jQuery UI 没加载或者加载在插件之后。常见做法是用本地文件而不是 CDN因为这类插件多用于内网终端外网不一定通。目录我一般整理成这样virtual-keyboard/ ├── index.html # 示例入口 ├── css/ │ ├── jquery-ui.min.css # jQuery UI 基础主题 │ └── keyboard.css # 键盘皮肤与布局样式 ├── js/ │ ├── jquery.min.js │ ├── jquery-ui.min.js │ └── jquery.keyboard.js # 插件本体 └── layouts/ # 多语言布局定义按需引入 ├── numeric.js └── alphanumeric.jslayouts目录是否独立存在取决于你拿到的版本有的包把布局内联在插件里有的拆成单独文件按需加载。打开jquery.keyboard.js搜一下layouts关键字就能确认别凭印象引文件这是第一个容易白费半小时的点。2.2 最小可运行页面一个输入框加一行初始化先不碰任何高级配置把「点输入框弹键盘、按键能上屏」跑通再谈布局定制。下面这段是能直接存成index.html打开的最小结构!DOCTYPE html html langzh-CN head meta charsetutf-8 !-- 顺序不能乱UI 主题 - 键盘皮肤 -- link relstylesheet hrefcss/jquery-ui.min.css link relstylesheet hrefcss/keyboard.css /head body !-- 加 readonly 防止物理键盘/软键盘抢输入这是 kiosk 场景的关键 -- input typetext iduserInput readonly placeholder点击输入 script srcjs/jquery.min.js/script script srcjs/jquery-ui.min.js/script script srcjs/jquery.keyboard.js/script script $(function () { // 绑定虚拟键盘layout 指定初始布局 $(#userInput).keyboard({ layout: qwerty, usePreview: false, // 关闭预览浮层触屏上更跟手 autoAccept: true, // 每次按键直接写入输入框 restrictInput: true // 只允许键盘上存在的字符进入 }); }); /script /body /html逻辑说明keyboard()是插件挂到 jQuery 原型上的方法内部走 jQuery UI 的 widget 机制所以它返回的是可链式调用的 jQuery 对象。layout决定初始键位表usePreview控制是否在按键上方浮出预览气泡触屏设备上这个浮层会挡住相邻按键建议关掉autoAccept为 true 时按键即写入为 false 则需要一个「确认」动作才提交适合需要二次确认的金额输入restrictInput是安全兜底防止用户通过粘贴或其他途径塞进键盘布局之外的字符。参数怎么改如果输入框只收数字把layout换成numeric同时把restrictInput保持 true这样字母键根本不会出现在界面上比事后用正则过滤体验好得多。如果页面有多个输入框不要每个都写一遍配置用类选择器批量绑定再在beforeVisible回调里按输入框的>$(#userInput).keyboard({ layout: qwerty, layouts: { // 自定义布局在标准 qwerty 基础上追加中文常用标点 qwerty-cn: { // 这里引用内置布局再扩展具体字段名以插件源码为准 layout: qwerty, // 部分版本支持在 display 层追加按键 display: { accept: 确定, cancel: 取消 } } } }); // 运行时切换比如点一个语言按钮 $(#btnCn).on(click, function () { $(#userInput).getkeyboard().setLayout(qwerty-cn); });逻辑说明getkeyboard()拿到的是键盘实例不是 jQuery 对象所以后面调的是实例方法setLayout。这一点容易混——直接$(#userInput).setLayout()会报方法不存在。参数上layouts里的键名就是setLayout的入参命名建议带语义qwerty-cn比layout2强得多后期维护时一眼能看出用途。边界提醒不同版本的布局定义字段不完全一致有的用layout字段引用内置布局做继承有的要求完整写出键位数组。拿到包之后先看示例页里有没有现成的多语言 demo照着它的字段结构改比对着文档猜靠谱。如果示例里没有就在源码里搜layouts的默认定义抄一份结构再改内容。3.2 按键回调在输入进框前后做校验和联动真正让虚拟键盘在业务里好用的是按键级回调。典型需求有三个金额输入限制小数位、密码框显示掩码、输入满位自动收起键盘。这三个都能在回调里解决不用在输入框外面再套一层校验逻辑。$(#amountInput).keyboard({ layout: numeric, restrictInput: true, maxLength: 10, // 按键写入前触发返回 false 可拦截本次输入 beforeInsert: function (e, keyboard, el) { var next (el.value || ) keyboard.last.key; // 金额最多两位小数第三位小数点直接拦掉 if ((next.match(/\./g) || []).length 1) return false; var dot next.indexOf(.); if (dot -1 next.length - dot 3) return false; return true; }, // 键盘显示/隐藏时联动页面其他元素 beforeVisible: function (e, keyboard, el) { // 根据输入框的>// 统一入口按输入框类型返回预置配置 function createKeyboard(selector, type, extra) { var presets { text: { layout: qwerty, restrictInput: true, maxLength: 50 }, number:{ layout: numeric, restrictInput: true, maxLength: 10 }, pin: { layout: numeric, restrictInput: true, maxLength: 6, usePreview: false } }; var conf $.extend({}, presets[type] || presets.text, extra || {}); return $(selector).keyboard(conf).getkeyboard(); } // 页面侧只关心业务语义 createKeyboard(#amount, number, { beforeInsert: function (e, kb, el) { var next (el.value || ) kb.last.key; return !(next.split(.).length 2 next.split(.)[1].length 2); } });逻辑说明presets把三类常见输入的默认参数固化$.extend做浅合并让调用方可以覆盖任意一项返回实例方便后续调setLayout或取值。这样新增一个输入框只需要一行声明校验规则作为extra传入不会污染预置。参数上要注意$.extend是浅合并如果预置里有嵌套对象比如display调用方传入会整体替换而不是逐键合并需要深合并就换$.extend(true, ...)。验证这套封装是否可靠我一般跑一个清单三类输入各建一个框逐个确认布局正确、长度限制生效、非法字符被拦、切换布局后回调仍然挂得上。清单里最容易漏的是「切换布局后回调是否还在」——有些实现里setLayout会重建键盘 DOM如果回调是绑在旧 DOM 上的就会失效必须在切换后重新点一遍按键验证。还有一个值得做的技巧把键盘的显示状态和页面滚动联动。键盘弹出时如果输入框在页面下半部分容器可能被挤出视口用户看不到自己输的内容。处理方式是在visible回调里算一下输入框相对视口的位置必要时把页面滚到输入框上方留出键盘高度。这个逻辑不复杂但没做的话在长表单页面上体验会明显打折。从那以后我每次接这类输入组件都强制先在目标设备上把「物理键盘是否被真正屏蔽」这一条单独验一遍再谈布局和样式——顺序反了后面全是白工。希望帮到你。源码包和示例页按文首提到的目录结构整理好了拿到后先跑最小页面再按第 3 章的配置逐项加别一上来就改全套。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
