在前端开发中，文本输入框的输入内容需要格式化的场景经常出现。@nikches/vanilla-text-mask 是一个针对输入框内容格式化的 npm 包。本文将详细介绍如何使用这个包以及它的实现原理。
安装
npm i @nikches/vanilla-text-mask
使用
引入包：
import TextMask from "@nikches/vanilla-text-mask";
示例
下面是引入包后进行手机号码格式化的实例代码：
-- -------------------- ---- ------- ----- ----- - --------------------------------------- ----- -------- - ---------- ----- ------ ---------- --------- ------ ---- -- ---------------------- --------------------- - ------- --- --- --- ------------------------------- -- -- - ---------------------- --- ------------------------------- --- -- - --------------------- ----- ---
上述代码将输入框中输入的文本内容格式化为美国式的电话号码格式，即 (XXX) XXX-XXXX。使用 TextMask 返回了一个函数，这个函数接受两个参数。第一个是输入框元素，第二个是事件对象。定义了这样一个格式化的函数后，只需在 HTML 中引入相关的标签即可完成输入框格式化。例如：
<input id="phone-input" type="text" />
在输入框中输入字符串 "1234567890" 时，文本框中将显示 "(123) 456-7890"。
实现原理
在实现上述功能的过程中，@nikches/vanilla-text-mask 内部对输入框的输入事件进行了处理。当用户输入文本时，通过定义的 mask 字符串对输入内容进行格式化。同时，通过定义的 dispatch 函数将处理过的事件再次派发，以保证事件的正确性。
需要注意的是，@nikches/vanilla-text-mask 对输入框的输入事件进行了监听，所以当输入框的 value 值通过代码修改时并不会触发事件。需要进行手动派发事件以保证正确的格式化效果。例如：
input.value = "(123) 456-7890";
input.dispatchEvent(new Event("input"));总结
@nikches/vanilla-text-mask 是一个针对输入框内容格式化的 npm 包，通过介绍其用法以及实现原理，本文旨在帮助了解该包的前端开发者进行文本格式化相关的工作。同时，在使用本包时应注意对输入框的输入事件进行处理，以保证正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005556081e8991b448d2928