jquery.inputmask插件介绍-编程实验室

一、什么是 jQuery.inputmask？

主要应用场景

二、快速上手

1. 引入依赖文件

2. 基础用法

3. 掩码字符定义

三、高级功能

1. 自定义占位符

2. 完成回调

3. 扩展自定义字符

4. 重复掩码

5. 移除默认占位符

四、配合 Vue.js 使用

五、更多实用示例

常见格式掩码

六、注意事项

七、总结

一、什么是 jQuery.inputmask？

jQuery.inputmask.js是一个轻量级的 jQuery 插件，用于为 HTML 输入框创建输入掩码（Input Mask）。输入掩码可以预先定义输入格式，自动插入固定字符（如括号、斜杠、短横线），并限制用户输入特定类型的字符（数字、字母等）。这有助于确保数据格式的一致性，大大提升用户体验和数据准确性。

主要应用场景

电话号码格式化
日期输入（MM/DD/YYYY）
身份证/社保号
信用卡号码
IP地址
货币金额
产品密钥

二、快速上手

1. 引入依赖文件

在使用前，需要先引入 jQuery 和 inputmask 插件：

<!-- 引入 jQuery 核心库 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入 jQuery.inputmask 插件 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>

2. 基础用法

选择一个输入框，调用.mask()方法并传入掩码格式：

javascript

$(document).ready(function(){ // 日期格式：月/日/年 $("#date").mask("99/99/9999"); // 电话号码格式：(区号) 号码-分机 $("#phone").mask("(999) 999-9999"); // 社保号格式 $("#ssn").mask("999-99-9999"); });

3. 掩码字符定义

插件预定义了三种基础字符类型：

字符	说明	示例
`9`	数字（0-9）	`999`→ 123
`a`	字母（A-Z，a-z）	`aaa`→ abc
`*`	字母或数字	`***`→ a1b

固定字符（非以上字符）会自动插入且用户无法删除。例如在(999) 999-9999中，括号、空格和短横线都会自动显示。

三、高级功能

1. 自定义占位符

默认占位符是下划线_，可以修改为空格或其他字符：

javascript

$("#product").mask("99/99/9999", { placeholder: " " // 使用空格作为占位符 });

2. 完成回调

当输入框填满时可以触发回调函数：

javascript

$("#date").mask("99/99/9999", { completed: function() { alert("输入完成：" + $(this).val()); } });

3. 扩展自定义字符

可以定义新的掩码字符来匹配特定正则表达式：

javascript

// 定义 '~' 字符匹配 + 或 - 符号 $.mask.definitions['~'] = '[+-]'; // 使用自定义掩码 $("#eyescript").mask("~9.99 ~9.99 999");

4. 重复掩码

当需要重复相同类型的输入时：

javascript

$("#repeatInput").inputmask({ mask: "9", repeat: 10, // 重复10次 greedy: false });

5. 移除默认占位符

不想要显示下划线占位符：

javascript

$("#noPlaceholder").inputmask({ mask: "99-9999999", placeholder: "" // 占位符为空 });

四、配合 Vue.js 使用

在现代框架（如 Vue）中使用 jQuery 插件时，需要在 DOM 渲染完成后初始化：

vue

<template> <input type="text" id="myInput" v-model="inputValue"> </template> <script> export default { data() { return { inputValue: '' }; }, mounted() { // 确保在 mounted 钩子中初始化掩码 const inputElement = $('#myInput'); inputElement.inputmask('99-9999'); } }; </script>

⚠️注意：jQuery 直接操作 DOM 可能与 Vue 的虚拟 DOM 机制产生冲突，建议谨慎使用或考虑原生替代方案。

五、更多实用示例

常见格式掩码

// IP 地址 $("#ip").inputmask("999.999.999.999"); // 货币（欧元格式） $("#currency").inputmask('€ 999.999.999,99', { numericInput: true }); // 小数（右对齐） $("#decimal").inputmask('decimal', { rightAlignNumerics: false }); // 邮箱地址（高级用法） $("#email").inputmask({ mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]", greedy: false, definitions: { '*': { validator: "[0-9A-Za-z!#$%&'*+/=?^_`{|}~\-]", cardinality: 1 } } });