前端UI组件【免费下载链接】InputmaskInput Mask plugin项目地址https://gitcode.com/gh_mirrors/in/Inputmask点击查看免费下载Colormask 是 Inputmask 提供的一个扩展它与标准 Inputmask 完全同源但额外允许你为掩码本身静态字符、占位符与光标单独指定颜色使其与用户输入的文本颜色相互独立。本文以仓库中的官方文档 Colormask.md 为主体结合 lib/extensions/colormask.js 与 lib/extensions/colormask.css 的源码实现完整讲解 Colormask 的引入方式、基础用法、样式定制原理与底层渲染机制读完你就能在自己的表单中落地一套灰色静态掩码 正常颜色输入的经典交互方案。一、Colormask 是什么官方文档对它的定位一句话可以概括Colormask 与 Inputmask 功能完全一致区别仅在于它允许你为掩码指定一种颜色。这一特性在以下场景中尤其有用掩码中的静态字符如-、(、)、空格与用户输入内容希望呈现不同颜色输入尚未完成时占位符与光标需要以弱化例如灰色的方式呈现突出用户已经键入的文本表单视觉上需要引导式输入框掩码看起来像底纹/水印而真实输入浮于其上。从源码看Colormask构造器并未重新实现掩码逻辑而是直接复用 Inputmask 的能力// lib/extensions/colormask.js function Colormask(alias, options, internal) { // 允许不带 new 直接调用 if (!(this instanceof Colormask)) { return new Colormask(alias, options, internal); } this.colorMask undefined; Object.getOwnPropertyNames(Inputmask).forEach(function (key) { if (!Object.prototype.hasOwnProperty.call(this, key)) { this[key] Inputmask[key]; } }, this); } Colormask.prototype Inputmask.prototype;可见 Colormask 以Inputmask.prototype为原型所有 mask 配置、校验、事件处理能力全部继承自 Inputmask额外只挂载了几个钩子hook来接管渲染这正是与 inputmask 相同但多了配色这一说法的源码依据。二、安装与引入2.1 经典script标签方式官方文档指出使用浏览器脚本方式时需要引入dist目录下构建产物的两个文件link relstylesheet hrefcolormask.css / script srccolormask.js/script仓库中对应的产物确实存在dist/colormask.css 与 dist/colormask.js。此外 webpack.config.js 中为 Colormask 单独配置了名为colormask的构建任务入口为 bundle.colormask.js产出dist/colormask与dist/colormask.min两套文件并同时生成 ES Module 版本dist/esm/colormask.mjs。如果你需要从源码自行构建可在仓库根目录运行npm run colormask2.2 ES Module / Bundler 方式在打包工具webpack、Vite、Rollup 等中使用时官方文档给出的标准写法是import inputmask/colormask.css; import Colormask from inputmask/colormask; Colormask({ mask: 999-999-9999 }).mask(selector);这里inputmask/colormask之所以可用是因为 package.json 的exports字段显式声明了./colormask子路径并同时提供了类型声明dist/types/extensions/colormask.d.ts、ESM 构建dist/esm/colormask.mjs与 CommonJS 构建dist/colormask.js./colormask: { types: ./dist/types/extensions/colormask.d.ts, import: ./dist/esm/colormask.mjs, require: ./dist/colormask.js }2.3 子路径导出无法解析时的兜底写法如果你的打包器如某些旧版本工具或特定配置不解析inputmask/*这样的 subpath exports官方文档明确给出了降级方案——直接使用dist目录下的文件import inputmask/dist/colormask.css; import Colormask from inputmask/dist/colormask.js;这与文档中Classic web方式指向同一份构建产物只是改由打包器来管理依赖。另外package.json中files字段包含dist/与lib/因此两种路径在安装后的 node_modules 中都是可用的。三、基本使用Colormask 的使用方式与 Inputmask 几乎完全一致只是把Inputmask(...)换成Colormask(...)import inputmask/colormask.css; import Colormask from inputmask/colormask; // 10 位电话号码掩码数字以灰色静态样式呈现输入文本以正常颜色呈现 Colormask({ mask: 999-999-9999 }).mask(document.querySelector(#phone));selector可以是任何 DOM 元素选择器或元素本身与 Inputmask 的mask()行为一致所有 Inputmask 支持的选项如placeholder、jitMasking、rightAlign、isRTL等理论上都可直接传给Colormask({ ... })因为它继承自Inputmask.prototype由于构造器内部做了this instanceof Colormask判断即使忘记写new也不会报错见 lib/extensions/colormask.js。在浏览器全局环境下脚本方式引入后可通过window.Colormask访问源码末尾有window.Colormask Colormask;的挂载用法同样为Colormask({ mask: 999-999-9999 }).mask(.my-input);四、通过 colormask.css 定制掩码配色文档强调使用前请先查看样式表colormask.css将颜色调整为你需要的值。整个 Colormask 的双色效果完全由样式驱动因此理解这份样式表是定制的关键。以下逐条解读 lib/extensions/colormask.cssdist/colormask.css为同名构建产物mark.im-caret { animation: 1s blink step-end infinite !important; } mark.im-caret-select { background-color: rgba(0, 0, 0, 0.25); } keyframes blink { from, to { border-right-color: black; } 50% { border-right-color: white; } } span.im-static { color: grey; } div.im-colormask { display: inline-block; border-style: groove; border-width: 1px; appearance: textfield; cursor: text; } div.im-colormask input, div.im-colormask input:-webkit-autofill { position: absolute !important; display: inline-block; background-color: transparent; color: transparent; -webkit-text-fill-color: transparent; transition: background-color 5000s ease-in-out 0s; caret-color: transparent; text-shadow: none; appearance: textfield; border-style: none; left: 0; /*calculated*/ } div.im-colormask input:focus { outline: none; } div.im-colormask input::selection { background: none; } div.im-colormask input::-moz-selection { background: none; } div.im-colormask input:-webkit-autofill ~ div { background-color: rgb(255, 255, 255); } div.im-colormask div { color: black; display: inline-block; width: 100px; /*calculated*/ }这些规则对应了 Colormask 渲染出的三类元素具体结构见下文源码剖析类名 / 选择器作用定制建议span.im-static掩码中的静态字符分隔符、括号等修改color: grey即可改变掩码底色这是最常用的配色入口mark.im-caret光标右侧边框闪烁动画调整blink关键帧中的border-right-colormark.im-caret-select文本选区高亮修改background-color的透明度div.im-colormask外层容器模拟输入框边框调整border-style/border-width获得不同边框观感div.im-colormask input真正接收键盘输入的input文字被设为透明一般无需改动color: transparent是实现输入文字与掩码分开着色的核心div.im-colormask div承载掩码模板静态字符 输入文本的渲染层修改color: black即为输入文本的实际颜色关键设计在于真实的input元素文字是透明的color: transparent; caret-color: transparent用户看到的输入内容实际由内层div的模板渲染掩码静态字符由span.im-static渲染。因此只需分别调整span.im-static与div.im-colormask div两处的颜色就能实现掩码一个颜色、输入另一个颜色。其中-webkit-text-fill-color: transparent与caret-color: transparent还处理了 WebKit 内核下自动填充与光标显示的问题。五、源码剖析双色效果是如何渲染出来的阅读 lib/extensions/colormask.js 可以确认Colormask 并没有改动 Inputmask 的掩码算法而是通过 4 个钩子介入渲染流程Colormask.prototype.writeBufferHook function (caretPos) { renderColorMask.call(this, this.el, caretPos, false); }; Colormask.prototype.caretHook function (caretPos) { renderColorMask.call(this, this.el, caretPos, false); }; Colormask.prototype.applyMaskHook function () { initializeColorMask.call(this, this.el); }; Colormask.prototype.keyEventHook function (e) { if (e.key keys.ArrowRight || e.key keys.ArrowLeft) { // 方向键移动光标后异步重渲染保持光标与掩码同步 setTimeout(function () { renderColorMask.call(inputmask, inputmask.el, caretPos); }, 0); } };其中applyMaskHook在掩码应用时调用initializeColorMask负责 DOM 结构改造——创建一个div.im-colormask容器把原始input移入其中再创建一个模板div紧跟在输入框后面并把输入框设为绝对定位input.style.left template.offsetLeft px。同时为容器绑定mouseleave/mouseenter/click事件点击时会通过findCaretPos根据点击的clientX坐标、借助克隆字体样式测量文本宽度反推光标应落到的位置见 lib/extensions/colormask.jswriteBufferHook/caretHook在写入缓冲区或光标变化时调用renderColorMask重绘模板keyEventHook方向键移动时异步重绘确保光标标记位置正确。renderColorMask是渲染核心lib/extensions/colormask.js它遍历maskset.validPositions与getTestTemplate将缓冲区内容拼接为 HTML 模板静态字符段test.static true或该位置尚无输入被包裹进span.im-static输入字符段按原样输出当前光标位置插入mark.im-caret单字符或mark.im-caret-select多字符选区标记同时兼容jitMasking占位符渲染未输入位置输出getPlaceholder与isRTL方向RTL 下模板会 reverse 且静态/光标标签的起止顺序反转。因此你可以推断Colormask 的所有静态样式类im-static、im-caret、im-caret-select、im-colormask均由源码在运行时生成与 lib/extensions/colormask.css 中的选择器一一对应——这正是文档要求先看样式表、再调颜色的原因。六、注意事项与使用建议必须同时引入 CSS 与 JScolormask.css负责把真实输入框文字透明化并定义静态字符颜色缺少样式文件时会出现文字重叠或双色失效定制入口明确掩码颜色改span.im-static的color输入文本颜色改div.im-colormask div的color光标颜色改keyframes blink的border-right-color事件绑定在容器上鼠标进入/离开/点击事件被绑定到div.im-colormask容器而非input本身若你的页面样式重置了该容器的cursor或边框请以 lib/extensions/colormask.css 中的默认值为基准方向键与点击定位点击掩码空白处会按字符宽度测算光标位置因此自定义字体尤其等宽/非等宽字体可能影响点击定位精度建议保持字体、letter-spacing、text-transform等样式稳定构建与产物源码入口为 lib/extensions/colormask.js浏览器全局变量为window.Colormask打包入口为 bundle.colormask.js发布到 npm 的子路径映射见 package.json 的exports字段类型定义见 dist/types/extensions/colormask.d.ts与 Inputmask 的关系Colormask 不改变掩码语法、校验规则与事件体系任何已掌握 Inputmask 配置经验的开发者都可以零成本迁移只需将构造器名称替换并引入对应样式与脚本即可。七、官方文档对照本文所依据的官方文档为 inputmask-pages/src/assets/Colormask.md其在文档站中的渲染组件为 inputmask-pages/src/Components/Colormask/Colormask.js通过MarkDownPage渲染 Markdown 并生成目录 TOCColormask.lazy.js 提供懒加载仓库 inputmask-pages/src/assets/Documentation.md 的 Colormask 章节也给出了与本文一致的模块化引入示例。文中所列代码、样式类名与钩子名称均可在上述源码与产物文件中逐一核实。赞分享前端UI组件【免费下载链接】InputmaskInput Mask plugin项目地址https://gitcode.com/gh_mirrors/in/Inputmask点击查看免费下载相关推荐Inputmask扩展开发指南如何编写自定义输入掩码插件Inputmask扩展开发指南如何编写自定义输入掩码插件 在现代Web开发中表单输入验证是至关重要的环节。Inputmask作为一个功能强大的输入掩码插件前端UI组件Inputmask 的 NuGet 打包与发布指南在 .NET 项目中集成 Inputmask 输入掩码插件Inputmask 的 NuGet 打包与发布指南在 .NET 项目中集成 Inputmask 输入掩码插件 本篇指南以 Inputmask 仓库的 nusp前端UI组件Inputmask JIT掩码终极指南如何实现输入性能300%提升Inputmask JIT掩码终极指南如何实现输入性能300%提升 Inputmask是一款功能强大的输入掩码插件它能够帮助开发者轻松实现各种复杂的输入格式前端UI组件上一篇ViGEmBus三大游戏控制器兼容性难题的终极解决方案下一篇微信网页版免安装终极指南3分钟解决公司电脑限制难题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
前端UI组件【免费下载链接】InputmaskInput Mask plugin项目地址https://gitcode.com/gh_mirrors/in/Inputmask点击查看免费下载Colormask 是 Inputmask 提供的一个扩展它与标准 Inputmask 完全同源但额外允许你为掩码本身静态字符、占位符与光标单独指定颜色使其与用户输入的文本颜色相互独立。本文以仓库中的官方文档 Colormask.md 为主体结合 lib/extensions/colormask.js 与 lib/extensions/colormask.css 的源码实现完整讲解 Colormask 的引入方式、基础用法、样式定制原理与底层渲染机制读完你就能在自己的表单中落地一套灰色静态掩码 正常颜色输入的经典交互方案。一、Colormask 是什么官方文档对它的定位一句话可以概括Colormask 与 Inputmask 功能完全一致区别仅在于它允许你为掩码指定一种颜色。这一特性在以下场景中尤其有用掩码中的静态字符如-、(、)、空格与用户输入内容希望呈现不同颜色输入尚未完成时占位符与光标需要以弱化例如灰色的方式呈现突出用户已经键入的文本表单视觉上需要引导式输入框掩码看起来像底纹/水印而真实输入浮于其上。从源码看Colormask构造器并未重新实现掩码逻辑而是直接复用 Inputmask 的能力// lib/extensions/colormask.js function Colormask(alias, options, internal) { // 允许不带 new 直接调用 if (!(this instanceof Colormask)) { return new Colormask(alias, options, internal); } this.colorMask undefined; Object.getOwnPropertyNames(Inputmask).forEach(function (key) { if (!Object.prototype.hasOwnProperty.call(this, key)) { this[key] Inputmask[key]; } }, this); } Colormask.prototype Inputmask.prototype;可见 Colormask 以Inputmask.prototype为原型所有 mask 配置、校验、事件处理能力全部继承自 Inputmask额外只挂载了几个钩子hook来接管渲染这正是与 inputmask 相同但多了配色这一说法的源码依据。二、安装与引入2.1 经典script标签方式官方文档指出使用浏览器脚本方式时需要引入dist目录下构建产物的两个文件link relstylesheet hrefcolormask.css / script srccolormask.js/script仓库中对应的产物确实存在dist/colormask.css 与 dist/colormask.js。此外 webpack.config.js 中为 Colormask 单独配置了名为colormask的构建任务入口为 bundle.colormask.js产出dist/colormask与dist/colormask.min两套文件并同时生成 ES Module 版本dist/esm/colormask.mjs。如果你需要从源码自行构建可在仓库根目录运行npm run colormask2.2 ES Module / Bundler 方式在打包工具webpack、Vite、Rollup 等中使用时官方文档给出的标准写法是import inputmask/colormask.css; import Colormask from inputmask/colormask; Colormask({ mask: 999-999-9999 }).mask(selector);这里inputmask/colormask之所以可用是因为 package.json 的exports字段显式声明了./colormask子路径并同时提供了类型声明dist/types/extensions/colormask.d.ts、ESM 构建dist/esm/colormask.mjs与 CommonJS 构建dist/colormask.js./colormask: { types: ./dist/types/extensions/colormask.d.ts, import: ./dist/esm/colormask.mjs, require: ./dist/colormask.js }2.3 子路径导出无法解析时的兜底写法如果你的打包器如某些旧版本工具或特定配置不解析inputmask/*这样的 subpath exports官方文档明确给出了降级方案——直接使用dist目录下的文件import inputmask/dist/colormask.css; import Colormask from inputmask/dist/colormask.js;这与文档中Classic web方式指向同一份构建产物只是改由打包器来管理依赖。另外package.json中files字段包含dist/与lib/因此两种路径在安装后的 node_modules 中都是可用的。三、基本使用Colormask 的使用方式与 Inputmask 几乎完全一致只是把Inputmask(...)换成Colormask(...)import inputmask/colormask.css; import Colormask from inputmask/colormask; // 10 位电话号码掩码数字以灰色静态样式呈现输入文本以正常颜色呈现 Colormask({ mask: 999-999-9999 }).mask(document.querySelector(#phone));selector可以是任何 DOM 元素选择器或元素本身与 Inputmask 的mask()行为一致所有 Inputmask 支持的选项如placeholder、jitMasking、rightAlign、isRTL等理论上都可直接传给Colormask({ ... })因为它继承自Inputmask.prototype由于构造器内部做了this instanceof Colormask判断即使忘记写new也不会报错见 lib/extensions/colormask.js。在浏览器全局环境下脚本方式引入后可通过window.Colormask访问源码末尾有window.Colormask Colormask;的挂载用法同样为Colormask({ mask: 999-999-9999 }).mask(.my-input);四、通过 colormask.css 定制掩码配色文档强调使用前请先查看样式表colormask.css将颜色调整为你需要的值。整个 Colormask 的双色效果完全由样式驱动因此理解这份样式表是定制的关键。以下逐条解读 lib/extensions/colormask.cssdist/colormask.css为同名构建产物mark.im-caret { animation: 1s blink step-end infinite !important; } mark.im-caret-select { background-color: rgba(0, 0, 0, 0.25); } keyframes blink { from, to { border-right-color: black; } 50% { border-right-color: white; } } span.im-static { color: grey; } div.im-colormask { display: inline-block; border-style: groove; border-width: 1px; appearance: textfield; cursor: text; } div.im-colormask input, div.im-colormask input:-webkit-autofill { position: absolute !important; display: inline-block; background-color: transparent; color: transparent; -webkit-text-fill-color: transparent; transition: background-color 5000s ease-in-out 0s; caret-color: transparent; text-shadow: none; appearance: textfield; border-style: none; left: 0; /*calculated*/ } div.im-colormask input:focus { outline: none; } div.im-colormask input::selection { background: none; } div.im-colormask input::-moz-selection { background: none; } div.im-colormask input:-webkit-autofill ~ div { background-color: rgb(255, 255, 255); } div.im-colormask div { color: black; display: inline-block; width: 100px; /*calculated*/ }这些规则对应了 Colormask 渲染出的三类元素具体结构见下文源码剖析类名 / 选择器作用定制建议span.im-static掩码中的静态字符分隔符、括号等修改color: grey即可改变掩码底色这是最常用的配色入口mark.im-caret光标右侧边框闪烁动画调整blink关键帧中的border-right-colormark.im-caret-select文本选区高亮修改background-color的透明度div.im-colormask外层容器模拟输入框边框调整border-style/border-width获得不同边框观感div.im-colormask input真正接收键盘输入的input文字被设为透明一般无需改动color: transparent是实现输入文字与掩码分开着色的核心div.im-colormask div承载掩码模板静态字符 输入文本的渲染层修改color: black即为输入文本的实际颜色关键设计在于真实的input元素文字是透明的color: transparent; caret-color: transparent用户看到的输入内容实际由内层div的模板渲染掩码静态字符由span.im-static渲染。因此只需分别调整span.im-static与div.im-colormask div两处的颜色就能实现掩码一个颜色、输入另一个颜色。其中-webkit-text-fill-color: transparent与caret-color: transparent还处理了 WebKit 内核下自动填充与光标显示的问题。五、源码剖析双色效果是如何渲染出来的阅读 lib/extensions/colormask.js 可以确认Colormask 并没有改动 Inputmask 的掩码算法而是通过 4 个钩子介入渲染流程Colormask.prototype.writeBufferHook function (caretPos) { renderColorMask.call(this, this.el, caretPos, false); }; Colormask.prototype.caretHook function (caretPos) { renderColorMask.call(this, this.el, caretPos, false); }; Colormask.prototype.applyMaskHook function () { initializeColorMask.call(this, this.el); }; Colormask.prototype.keyEventHook function (e) { if (e.key keys.ArrowRight || e.key keys.ArrowLeft) { // 方向键移动光标后异步重渲染保持光标与掩码同步 setTimeout(function () { renderColorMask.call(inputmask, inputmask.el, caretPos); }, 0); } };其中applyMaskHook在掩码应用时调用initializeColorMask负责 DOM 结构改造——创建一个div.im-colormask容器把原始input移入其中再创建一个模板div紧跟在输入框后面并把输入框设为绝对定位input.style.left template.offsetLeft px。同时为容器绑定mouseleave/mouseenter/click事件点击时会通过findCaretPos根据点击的clientX坐标、借助克隆字体样式测量文本宽度反推光标应落到的位置见 lib/extensions/colormask.jswriteBufferHook/caretHook在写入缓冲区或光标变化时调用renderColorMask重绘模板keyEventHook方向键移动时异步重绘确保光标标记位置正确。renderColorMask是渲染核心lib/extensions/colormask.js它遍历maskset.validPositions与getTestTemplate将缓冲区内容拼接为 HTML 模板静态字符段test.static true或该位置尚无输入被包裹进span.im-static输入字符段按原样输出当前光标位置插入mark.im-caret单字符或mark.im-caret-select多字符选区标记同时兼容jitMasking占位符渲染未输入位置输出getPlaceholder与isRTL方向RTL 下模板会 reverse 且静态/光标标签的起止顺序反转。因此你可以推断Colormask 的所有静态样式类im-static、im-caret、im-caret-select、im-colormask均由源码在运行时生成与 lib/extensions/colormask.css 中的选择器一一对应——这正是文档要求先看样式表、再调颜色的原因。六、注意事项与使用建议必须同时引入 CSS 与 JScolormask.css负责把真实输入框文字透明化并定义静态字符颜色缺少样式文件时会出现文字重叠或双色失效定制入口明确掩码颜色改span.im-static的color输入文本颜色改div.im-colormask div的color光标颜色改keyframes blink的border-right-color事件绑定在容器上鼠标进入/离开/点击事件被绑定到div.im-colormask容器而非input本身若你的页面样式重置了该容器的cursor或边框请以 lib/extensions/colormask.css 中的默认值为基准方向键与点击定位点击掩码空白处会按字符宽度测算光标位置因此自定义字体尤其等宽/非等宽字体可能影响点击定位精度建议保持字体、letter-spacing、text-transform等样式稳定构建与产物源码入口为 lib/extensions/colormask.js浏览器全局变量为window.Colormask打包入口为 bundle.colormask.js发布到 npm 的子路径映射见 package.json 的exports字段类型定义见 dist/types/extensions/colormask.d.ts与 Inputmask 的关系Colormask 不改变掩码语法、校验规则与事件体系任何已掌握 Inputmask 配置经验的开发者都可以零成本迁移只需将构造器名称替换并引入对应样式与脚本即可。七、官方文档对照本文所依据的官方文档为 inputmask-pages/src/assets/Colormask.md其在文档站中的渲染组件为 inputmask-pages/src/Components/Colormask/Colormask.js通过MarkDownPage渲染 Markdown 并生成目录 TOCColormask.lazy.js 提供懒加载仓库 inputmask-pages/src/assets/Documentation.md 的 Colormask 章节也给出了与本文一致的模块化引入示例。文中所列代码、样式类名与钩子名称均可在上述源码与产物文件中逐一核实。赞分享前端UI组件【免费下载链接】InputmaskInput Mask plugin项目地址https://gitcode.com/gh_mirrors/in/Inputmask点击查看免费下载相关推荐Inputmask扩展开发指南如何编写自定义输入掩码插件Inputmask扩展开发指南如何编写自定义输入掩码插件 在现代Web开发中表单输入验证是至关重要的环节。Inputmask作为一个功能强大的输入掩码插件前端UI组件Inputmask 的 NuGet 打包与发布指南在 .NET 项目中集成 Inputmask 输入掩码插件Inputmask 的 NuGet 打包与发布指南在 .NET 项目中集成 Inputmask 输入掩码插件 本篇指南以 Inputmask 仓库的 nusp前端UI组件Inputmask JIT掩码终极指南如何实现输入性能300%提升Inputmask JIT掩码终极指南如何实现输入性能300%提升 Inputmask是一款功能强大的输入掩码插件它能够帮助开发者轻松实现各种复杂的输入格式前端UI组件上一篇ViGEmBus三大游戏控制器兼容性难题的终极解决方案下一篇微信网页版免安装终极指南3分钟解决公司电脑限制难题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
`/`login_legacy()` 双流程与私有 HTTP/2 传输切换)
