前端UI组件【免费下载链接】Metro-UI-CSSA progressive front-end framework for creating high-performance responsive reactive web applications!项目地址https://gitcode.com/gh_mirrors/me/Metro-UI-CSS点击查看免费下载导读Metro UI CSS 的 Keypad 组件是一个为输入框打造的“可定制键盘面板”用于在网页中提供数字键盘、字母键盘乃至任意自定义按键集合特别适合安全 PIN 码输入、自定义字符输入或专用输入界面等场景。它内置按键乱序shuffle安全机制、8 方向定位、服务按键退格/清除与完整的 API 与事件体系。读完本文你将掌握如何用data-*属性在 5 分钟内接入键盘深入理解 22 个插件参数与 9 个 API 方法的底层实现并能够通过 CSS 变量完成主题化定制。组件概览与依赖Keypad 组件由三部分构成核心逻辑 keypad.js、样式表 keypad.less 以及聚合入口 index.js。入口文件同时引入了input-common模块import ../input-common/index.js这意味着 Keypad 的视觉与行为会继承 Metro UI 统一的输入框基础样式体系。该组件已在 组件总入口 中被统一导入因此只要页面引入了打包后的lib/metro.js与lib/metro.css即可直接使用。根据 README 的说明组件依赖Metro UI core组件注册、事件系统、工具函数等运行时基础LESS variables and mixins构建时依赖source/include/vars.less与source/include/mixins.less中的变量与混合宏在 keypad.less 顶部可见import (once) ../../include/vars; import (once) ../../include/mixins;。快速接入基本用法Keypad 采用声明式初始化——只需给input加上data-rolekeypad属性即可!-- 基本数字键盘 -- input typetext>!-- 自定义键 分隔符 -- input typetext >!-- 字母键盘 -- input typetext >!-- 带标签的键盘 -- input typetext>!-- 开启按键乱序初始乱序 5 次 -- input typetext >var keypad Metro.getPlugin(#my-keypad, keypad); keypad.shuffle();shuffleKeys(count)按指定次数洗牌并立即重绘键位内部额外调用_createKeys()比shuffle()多出 UI 刷新步骤var keypad Metro.getPlugin(#my-keypad, keypad); keypad.shuffleKeys(5); // 洗牌 5 次并重绘val([value])取值/赋值。读取时若trimSeparator: true会去除值中的分隔符源码用正则new RegExp(o.keySeparator, g)替换赋值时同步回写输入框var keypad Metro.getPlugin(#my-keypad, keypad); var value keypad.val(); // 读取 keypad.val(1234); // 写入open() / close()打开/关闭键盘面板。open()会遵循openMode的视口检测逻辑close()移除open与top-left类var keypad Metro.getPlugin(#my-keypad, keypad); keypad.open(); keypad.close();disable() / enable() / toggleState()禁用/启用键盘。禁用会给输入框父容器加disabled类样式上体现为不可交互toggleState()根据当前输入框的disabled属性自动切换var keypad Metro.getPlugin(#my-keypad, keypad); keypad.disable(); keypad.enable(); keypad.toggleState();setPosition(position)动态调整键盘面板方位合法值即下方 CSS 位置类的 8 个方位top-left、top、top-right、right、bottom-right、bottom、bottom-left、left非法值会被忽略同时支持通过修改data-position属性触发changeAttribute回调自动换位var keypad Metro.getPlugin(#my-keypad, keypad); keypad.setPosition(top-left);此外组件实现了标准的destroy()方法解绑事件、移除标签与面板 DOM用于动态页面中的资源释放。事件体系事件触发时机onKeypadCreate键盘创建完成时onChange键盘值发生变化时onClear点击清除×键时onBackspace点击退格←键时onShuffle执行乱序后onKey任意键被点击时事件回调返回的数据在源码中有明确对应onKey携带{ key, val }被按键与当前值onBackspace携带{ val }onShuffle携带{ keysToWork, keys }洗牌后的工作键位与原始键位。事件用法示例input typetext >function onKeyPressed(key, value, element) { console.log(Key pressed:, key); console.log(Current value:, value); } function onValueChanged(value) { console.log(Value changed to:, value); }打开/关闭行为与视口自适应键盘面板的显隐交互由 keypad.js 统一管理点击输入框区域时切换open类openMode: auto下面板打开后会调用Metro.utils.inViewport(keys[0])检测面板是否溢出视口若溢出则自动切换为top-left向上展开避免键盘超出屏幕底部openMode: up则始终向上展开全局点击监听会关闭所有非keep-open的键盘面板keypad.js保证同一时刻最多一个键盘处于打开状态因此当open参数为 true 时面板会常驻显示。样式层面keypad.less 定义了.keys的绝对定位、display: none隐藏态以及.open时切换为 flex 显示每个方位类.right、.bottom、.top、.left、.bottom-left、.bottom-right、.top-left、.top-right都配有对应的top/left/transform定位规则以及一个旋转 45° 的箭头伪元素::before指向输入框形成视觉上的关联提示。主题定制CSS 变量与样式类CSS 变量Keypad 的配色完全由 CSS 变量驱动且默认继承自输入框体系var(--input-background)等定义于 input-common.less变量默认值浅色深色模式说明--keypad-backgroundvar(--input-background)var(--input-background)面板背景色--keypad-colorvar(--input-color)var(--input-color)面板文本/按键文字色--keypad-border-color#E8E8E8#4A4D51面板与按键边框色--keypad-border-radius4px继承--input-border-radius4px面板圆角注意--keypad-border-radius在样式实现上直接复用var(--input-border-radius)keypad.less深色模式通过.dark-side作用域切换--keypad-border-colorkeypad.less。定制单个键盘/* 为特定键盘定制样式 */ #my-keypad { --keypad-background: #f0f7ff; --keypad-color: #0d47a1; --keypad-border-color: #90caf9; --keypad-border-radius: 8px; }可用 CSS 类基础类.keypad— 键盘组件根容器含输入框.keys— 键位容器.key— 单个按键.service-key— 服务按键退格、清除.label-for-input— 生成的标签.input-kbd-button— 输入框内的键盘切换按钮位置类与setPosition的 8 个方位一一对应.keys.right— 位于输入框右侧.keys.bottom— 位于输入框下方.keys.top— 位于输入框上方.keys.left— 位于输入框左侧.keys.bottom-left— 下方偏左.keys.bottom-right— 下方偏右.keys.top-left— 上方偏左.keys.top-right— 上方偏右状态类.open— 键盘面板打开.keys.open时 flex 显示.focused— 输入框聚焦聚焦/失焦时由 keypad.js 的 focus/blur 监听添加/移除.disabled— 键盘禁用disable()时添加在面板容器上补充能力.keypad.pill-input组合类可将输入框切换为胶囊造型通过--input-border-radius: calc(var(--input-height) * 0.44)计算圆角按键变为圆形见 keypad.less按键悬浮时提供放大反馈transform: scale(1.1)与焦点高亮混合宏见 keypad.less。实战最佳实践结合组件源码与 官方示例页面 的用法推荐以下实践安全敏感场景PIN 码务必开启乱序data-shuffletrue让键位在初始化与每次点击后重新排布防止点击轨迹泄露密码配合data-shuffle-count提高洗牌轮数。若需输入长度受限可同时设置data-key-length锁定位数。提供清晰标签提升可访问性使用data-label生成与输入框for/id关联的label组件会自动为无 id 的输入框生成唯一 id源码Hooks.useId无需手动维护。善用例外键与分隔符将“确定”“跳格”等功能键放入data-except-keys避免污染输入值用data-key-separator生成带分隔符的序列如验证码1-2-3-4需要纯净值时可配合data-trim-separatortrue让val()返回无分隔符内容。移动端触控优化根据设备调整data-key-size默认 36px增大按键面积提升触摸命中率开启data-use-element-size-for-keys让面板宽度与输入框对齐视觉更统一。用定位选项保证可见性在窄屏/底部表单场景使用data-open-modeup或动态调用setPosition(top-left)配合内置的inViewport检测确保键盘不溢出屏幕。动态页面按需创建示例页面展示了用 jQuery 动态追加input>赞分享前端UI组件【免费下载链接】Metro-UI-CSSA progressive front-end framework for creating high-performance responsive reactive web applications!项目地址https://gitcode.com/gh_mirrors/me/Metro-UI-CSS点击查看免费下载相关推荐frab 本地化教程如何将会议系统翻译成多语言版本frab 本地化教程如何将会议系统翻译成多语言版本 frab 是一个功能强大的开源会议管理系统专为技术会议、学术研讨会和社区活动设计。通过 frab 的本地后端Ant Design Rate 评分组件 character 自定义字符实战从图标、字母到中文字符Ant Design Rate 评分组件 character 自定义字符实战从图标、字母到中文字符 导读 Rate评分是 Ant Design 数据录入组前端UI组件设计系统ant-design-mobile NumberKeyboard 数字键盘组件完全指南属性、自定义键位与 VirtualInput 联动ant design mobile NumberKeyboard 数字键盘组件完全指南属性、自定义键位与 VirtualInput 联动 数字键盘NumbeUI组件前端移动开发上一篇GHelper终极指南解锁华硕笔记本的轻量级控制中心下一篇三步释放华硕笔记本潜能GHelper轻量控制工具完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考