jquery.inputmask插件介绍

[一、什么是 jQuery.inputmask？](#一、什么是 jQuery.inputmask？)

主要应用场景

二、快速上手

[1. 引入依赖文件](#1. 引入依赖文件)

[2. 基础用法](#2. 基础用法)

[3. 掩码字符定义](#3. 掩码字符定义)

三、高级功能

[1. 自定义占位符](#1. 自定义占位符)

[2. 完成回调](#2. 完成回调)

[3. 扩展自定义字符](#3. 扩展自定义字符)

[4. 重复掩码](#4. 重复掩码)

[5. 移除默认占位符](#5. 移除默认占位符)

[四、配合 Vue.js 使用](#四、配合 Vue.js 使用)

一、什么是 jQuery.inputmask？

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

主要应用场景

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

二、快速上手

1. 引入依赖文件

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

html 复制代码

<!-- 引入 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

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

javascript 复制代码

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

2. 完成回调

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

javascript

javascript 复制代码

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

3. 扩展自定义字符

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

javascript

javascript 复制代码

// 定义 '~' 字符匹配 + 或 - 符号
$.mask.definitions['~'] = '[+-]';

// 使用自定义掩码
$("#eyescript").mask("~9.99 ~9.99 999");

4. 重复掩码

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

javascript

javascript 复制代码

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

5. 移除默认占位符

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

javascript

javascript 复制代码

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

四、配合 Vue.js 使用

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

vue

javascript 复制代码

<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 机制产生冲突，建议谨慎使用或考虑原生替代方案。

五、更多实用示例

常见格式掩码

javascript 复制代码

// 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
        }
    }
});

六、注意事项

版本兼容性：插件支持 IE6/7、Firefox、Safari、Opera、Chrome 等主流浏览器。
框架冲突：在 React/Vue 等现代框架中，建议优先使用框架原生方案或专门适配的库。
后端验证 ：前端掩码只是提升用户体验的工具，不能替代后端数据验证。

七、总结

jquery.inputmask.js 是一个简单实用的表单辅助工具，通过简单的 API 调用就能实现复杂的输入格式控制。虽然现代前端框架逐渐弱化 jQuery 的地位，但这个插件在传统项目或快速原型开发中仍有很高的实用价值。掌握它，能让你的表单数据更规范、用户输入更轻松！