简介
IMask.js 是一个轻量级、无依赖的 JavaScript 输入掩码库，它可以帮助你为输入字段创建各种格式限制，比如电话号码、日期、货币等。无论用户输入什么，它都会自动格式化为你指定的格式。
主要特性
- 零依赖 – 纯原生 JavaScript，无需额外库
- 多种掩码类型 – 支持正则、数字、日期、模式等多种掩码
- 高度可定制 – 支持自定义定义、可选输入、重复块等
- 框架友好 – 提供 Vue、React、Angular 等框架插件
- 移动端优化 – 完美支持移动设备输入
- 灵活配置 – 支持覆盖模式、占位符、自动修复等
安装
pnpm install imask基础用法
import IMask from "imask";
// 创建掩码实例
const mask = new IMask(element, {
mask: "+{1}(000)000-00-00", // 电话号码格式
});掩码类型详解
1. 正则表达式掩码
使用正则表达式定义输入格式：
const emailMask = new IMask(document.getElementById("email"), {
mask: /^\S*@?\S*$/, // 邮箱格式验证
});2. 数字掩码
专门用于数字输入，支持千分位分隔符：
const integerMask = new IMask(document.getElementById("number"), {
mask: Number, // 整数掩码
min: -1000,
max: 1000,
thousandsSeparator: " ",
});3. 日期掩码
支持多种日期格式：
// 标准日期格式
const dateMask = new IMask(document.getElementById("date"), {
mask: Date,
min: new Date(2000, 0, 1),
max: new Date(2030, 0, 1),
lazy: false,
});4. 模式掩码
使用预定义的模式字符：
const phoneMask = new IMask(document.getElementById("phone"), {
mask: "+{1}(000)000-00-00", // 电话号码格式，身份证号："000000-00000000-0000", 信用卡号："0000 0000 0000 0000" 等
});5. 枚举掩码
限制输入为预定义的选项：
const enumMask = new IMask(document.getElementById("enum"), {
mask: IMask.MaskedEnum,
enum: ["VIP", "GOLD", "SILVER", "BRONZE"],
lazy: false,
});6. 范围掩码
限制输入在指定范围内：
const rangeMask = new IMask(document.getElementById("range"), {
mask: IMask.MaskedRange,
from: 1,
to: 100,
maxLength: 3,
});常用高级配置
| 名称 | 说明 |
|---|---|
| mask | 掩码规则 |
| lazy | 是否延迟掩码应用 |
| placeholder | 占位符 |
| unmask | 是否保留原始值 |
| definitions | 自定义掩码字符 |
| autofix | 自动修正输入 |
| greedy | 贪婪模式 |
| overwrite | 覆盖模式 |
事件处理
const mask = new IMask(document.getElementById("input"), {
mask: "+{1}(000)000-00-00",
});
// 输入完成事件
mask.on("complete", function () {
console.log("输入完成:", mask.value);
});
// 输入接受事件
mask.on("accept", function () {
console.log("输入被接受:", mask.value);
});值的获取和设置
const mask = new IMask(document.getElementById("input"), {
mask: "+{1}(000)000-00-00",
});
// 获取掩码后的值
console.log(mask.value); // +1(123)456-78-90
// 获取原始值（去除掩码字符）
console.log(mask.unmaskedValue); // 11234567890
// 设置值
mask.value = "+1(123)456-78-90";
mask.unmaskedValue = "11234567890";管道处理
使用管道转换和格式化值：
// 创建管道
const phonePipe = IMask.createPipe(
phoneMask.masked,
IMask.PIPE_TYPE.UNMASKED,
IMask.PIPE_TYPE.MASKED
);
// 使用管道
const formattedValue = phonePipe("1234567890"); // +1(234)567-89-0框架集成
Vue.js 集成
pnpm install imask vue-imask<template>
<div class="imask-demo">
<h2>IMask 输入框演示</h2>
<div class="input-container">
<label for="phone-input" class="input-label">电话号码</label>
<input
id="phone-input"
v-imask="maskOptions"
@accept="onAccept"
@complete="onComplete"
class="styled-input"
placeholder="+1(000)000-00-00"
type="tel"
/>
<div class="input-hint">请输入完整的电话号码</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { IMaskDirective } from "vue-imask";
// 注册指令
const vImask = IMaskDirective;
// 掩码选项
const maskOptions = reactive({
mask: "+{1}(000)000-00-00",
});
// 事件处理函数
const onAccept = (value) => {};
const onComplete = (value) => {};
</script>
React 集成
pnpm install imask react-imaskimport React from "react";
import { IMaskInput } from "react-imask";
function PhoneInput() {
return (
<IMaskInput
mask="+{1}(000)000-00-00"
placeholder="+1(___)___-__-__"
onAccept={(value) => console.log("接受的值:", value)}
/>
);
}
常见问题
Q：如何禁用掩码？
mask.destroy(); // 销毁掩码实例Q： 如何动态更改掩码？
mask.updateOptions({
mask: "000-000-0000", // 新的掩码格式
});Q：如何自定义验证规则？
const customMask = new IMask(document.getElementById("input"), {
mask: "0000-0000-0000-0000",
validate: function (value) {
// 自定义验证逻辑
return value.length === 19;
},
});参考资源
- 官方文档：https://imask.js.org
- GitHub：https://github.com/uNmAnNeR/imaskjs
- API：https://imask.js.org/guide.html
转载作品，原作者：前端开发技术前沿，文章来源：https://mp.weixin.qq.com/s/MjdywGW2ieAmoyBDEJIbmw
微信赞赏 
支付宝赞赏 
