attach

把掩码绑定到 <input>：输入和粘贴时自动格式化，保持光标位置，Backspace 可以越过字面量。详见 输入框。

签名

function attach(input: HTMLInputElement, mask: MaskInput, options?: AttachOptions): AttachedMask

interface AttachOptions {
  onChange?: (state: MaskState) => void;
  raw?: boolean;
  placeholder?: string;
}

interface MaskState { value: string; raw: string; complete: boolean; valid: boolean }

interface AttachedMask {
  readonly raw: string;
  readonly complete: boolean;
  readonly valid: boolean;
  update(mask: MaskInput, options?: AttachOptions): void;
  refresh(): void;
  destroy(): void;
}

	说明
onChange	变化时调用：{ value, raw, complete, valid }。没有变化的重新渲染不会调用它
raw（选项）	输入处理函数（@input、v-model）得到去掉掩码的值，输入框中仍显示掩码
placeholder	空位使用的字符：'_' → +7 (___) ___-__-__，'0' → +7 (000) 000-00-00，'•'、'X' —— 任意字符，包括数字。获得焦点时以及未填写完整时显示模板
raw、complete、valid	当前去掉掩码后的值、是否填写完整以及是否正确（isValid）
update(mask, options?)	更换掩码或选项（例如选择了其他国家）
refresh()	重新格式化在代码中写入输入框的值 —— 光标保持不变
destroy()	移除掩码

示例

const input = document.querySelector<HTMLInputElement>('#phone')!;
const select = document.querySelector<HTMLSelectElement>('#country')!;

const field = attach(input, phone('ru'), {
  onChange: ({ complete }) => input.classList.toggle('done', complete),
});

select.addEventListener('change', () => field.update(phone(select.value as PhoneCountry)));

另请参阅

• 输入框
• vMask：Vue 版本