tinyval-mask
零依赖的输入掩码：电话、银行卡、日期、金额、证件以及自定义模板。
- 自定义模板约 1 kB gzip，包含电话掩码和输入框绑定约 2.6 kB
- 光标不会跳动，Backspace 可以越过括号和短横线，可粘贴任意格式的内容
- 纯函数
mask/unmask也可以在服务端使用 —— 例如统一电话号码格式 - 用于 Vue 的
v-mask指令：v-model可得到带掩码或去掉掩码（.raw）的值，可见模板+7 (___) ___-__-__ - 日期掩码不会接受 32 日和 13 月
安装
bash
npm install tinyval-mask试一试
🇨🇳 中国
去掉掩码的值: "" 去掉掩码的值: "" 去掉掩码的值: "" 去掉掩码的值: "" 去掉掩码的值: "" 去掉掩码的值: "" 快速开始
ts
import { mask, unmask, attach } from 'tinyval-mask';
import { phone, card } from 'tinyval-mask/presets';
mask('89991234567', phone()); // '+7 (999) 123-45-67'
unmask('+7 (999) 123-45-67', phone()); // '79991234567'
mask('4276123456789012', card()); // '4276 1234 5678 9012'
mask('12ab34', '99-99'); // '12-34' — your own pattern
attach(document.querySelector('#phone'), phone()); // a mask on an <input>vue
<script setup lang="ts">
import { phone } from 'tinyval-mask/presets';
import { vMask } from 'tinyval-mask/vue';
const phoneMask = phone();
</script>
<template>
<input v-model="form.phone" v-mask="phoneMask" />
</template>