输入框
attach 把掩码绑定到 <input> 上。掩码最难的部分不是格式化,而是编辑时的行为,attach 会负责处理这些。
ts
import { attach } from 'tinyval-mask';
import { phone } from 'tinyval-mask/presets';
const input = document.querySelector<HTMLInputElement>('#phone')!;
const field = attach(input, phone(), {
onChange: ({ value, raw, complete }) => console.log(value, raw, complete),
});
field.raw; // '79991234567'
field.complete; // true
field.destroy(); // remove the mask输入时会发生什么
| 操作 | 行为 |
|---|---|
| 在末尾输入 | 字面量会自动出现:9 → +7 (9 |
| 在中间输入 | 字符后移,光标停在刚输入的字符之后 |
在 ) 或 - 后按 Backspace | 删除最近的数字,光标不会“卡”在字面量上 |
| 在字面量前按 Delete | 方向相反,行为相同 |
| 粘贴 | 接受任意格式:8 999 123-45-67、+79991234567、(999) 1234567 |
| 不合适的字符 | 会被忽略:号码中不会出现字母 |
光标按已输入的字符计算,而不是按字符串中的位置。因此即使掩码添加或删除分隔符(例如 numberMask 中的千位空格),光标也不会跳动。
与框架的兼容性
attach 会在框架的处理函数之前格式化值(在捕获阶段监听 input),因此 v-model、React 的 onChange 等拿到的都是已格式化的值。在程序化编辑(越过字面量的 Backspace)之后,attach 会自行派发 input 事件。
如果在代码中修改了输入框的值(input.value = …),请调用 field.update(mask) —— 它会重新格式化该值。