Skip to content

输入框 ​

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) —— 它会重新格式化该值。

另请参阅 ​