在前端开发中，输入框的输入格式化一直是一个比较烦人的问题。比如手机号码、银行卡号、身份证号等输入框需要限制输入的字符类型和格式，而用户的输入行为也很难完全控制。这时候，我们就需要一个输入控制的工具，这个工具就是今天要介绍的 npm 包 @msafi/vanilla-text-mask。
什么是 @msafi/vanilla-text-mask？
@msafi/vanilla-text-mask 是一个基于 vanilla.js 实现的轻量级 JavaScript 库，用于将输入框格式化为指定的格式，比如日期格式、电话号码格式、银行卡号格式等。它的特点是适用于各种 HTML 输入控件，支持多种格式化方式，比较易用且扩展性强。
安装 @msafi/vanilla-text-mask
使用 npm 安装 @msafi/vanilla-text-mask。
npm install @msafi/vanilla-text-mask
如果使用 webpack 等构建工具，可以直接通过 import 或 require 引入库。
import createTextMaskInputElement from "@msafi/vanilla-text-mask";
使用 @msafi/vanilla-text-mask
1. 导入库
在使用 @msafi/vanilla-text-mask 前，需要先从库中导入 createTextMaskInputElement 函数。
import createTextMaskInputElement from "@msafi/vanilla-text-mask";
2. 创建控件
创建 HTML 控件并设定输入控制格式。
<input type="text" placeholder="请输入电话号码" id="phone-input" pattern="[0-9]*" inputmode="numeric" autocomplete="off" />
3. 格式化控件
使用 createTextMaskInputElement 函数将控件格式化为指定格式。在这个例子中，我们使用电话号码格式 ([0-9]{3})-[0-9]{4}(-[0-9]{4})?。
-- -------------------- ---- ------- ----- ---------- - --------------------------------------- ----- --------- - - ---- -------- -------- -------- ---- ---- -------- -------- -------- -------- ---- -------- -------- -------- -------- -- ----- ---------------- - ---------------------------- ------------- ----------- ----- ---------- ---展开代码
4. 使用控件
控件创建完成后，可以像普通控件一样使用它。
maskedPhoneInput.update("12345678901"); // 显示格式化后的电话号码：(123)-4567-8901
示例代码
完整的示例代码如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ------------ ------------ ------- ------ --------- --------- ------ ---- ------------------- ------ ------------------------------ ------ ----------- --------------------- ---------------- ---------------- ------------------- ------------------ -- ------ ------- ------- ---------------------------------------------------------- -------- ----- ---------- - --------------------------------------- ----- --------- - - ---- -------- -------- -------- ---- ---- -------- -------- -------- -------- ---- -------- -------- -------- -------- -- ----- ---------------- - ---------------------------- ------------- ----------- ----- ---------- --- --------------------------------------- -- --------------------------- --------- ------- -------展开代码
总结
@msafi/vanilla-text-mask 具有轻量级、易用、扩展性强等特点，在输入框格式化、输入控制等方面可以提高开发效率和质量。希望这篇文章能够对初学者学习和使用 @msafi/vanilla-text-mask 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e244824
