UD5工具箱
入门指南：快速生成你的第一个输入掩码
本教程将手把手引导你使用输入掩码生成器，从零开始配置一个输入掩码并生成可用的JavaScript代码。即使你没有任何前端开发经验，也能在5分钟内完成整个流程。我们将以配置一个电话号码输入掩码为例，逐步介绍工具的各项功能。
第一步：打开工具页面
在浏览器中访问ud5.com的输入掩码生成器页面。打开后你会看到工具界面从上到下依次包含以下区域：
- 预设模板区域：展示了常用的掩码格式预设按钮，如电话号码、日期、信用卡等。
- 掩码配置区域：包含掩码模式字符串输入框、占位符字符配置和自动跳过字面量开关。
- 实时预览区域：展示掩码的实际输入效果，包含原始值显示和清空按钮。
- JavaScript代码区域：显示生成的代码，带有复制按钮。
- 掩码字符参考表：以表格形式展示掩码语法说明。
第二步：使用预设模板快速开始
如果你需要的掩码格式恰好在预设模板中，直接点击对应的模板按钮即可一键加载。例如，点击北美电话号码模板，掩码模式字符串输入框会自动填入(999) 999-9999，占位符和自动跳过设置也会同步调整。此时你可以在预览区域中直接输入数字，观察掩码的格式化效果。
如果预设模板中没有完全匹配你需求的格式，你可以将其作为起点，在掩码模式字符串输入框中进行修改。预设模板的价值在于快速建立一个基础配置，减少从零开始编写的工作量。
第三步：手动编写掩码模式字符串
在掩码模式字符串输入框中，按照掩码语法规则编写你的掩码。掩码语法非常简单：
- 输入数字9表示该位置必须是数字
- 输入字母a表示该位置必须是字母
- 输入星号*表示该位置可以是字母或数字
- 其他所有字符（如括号、破折号、斜杠等）会作为固定显示的字面量
以中国手机号为例，手机号由11位数字组成，通常格式化为3-4-4的分组方式。在掩码模式输入框中输入：999 9999 9999。这里999是3位数字，后面跟一个空格字面量，然后是9999（4位数字），再跟一个空格，最后是9999（4位数字）。输入完成后，掩码模式输入框下方的说明文字会实时解析你的掩码，确认语法是否正确。
第四步：配置占位符字符
占位符字符决定了输入框在用户尚未输入时显示的提示字符。默认使用下划线_，此时预览区域的输入框会显示999 9999 9999对应的占位效果。
你可以根据项目的设计风格选择其他占位符字符。例如，如果你的项目使用连字符风格，可以将占位符改为连字符-，此时输入框会显示--- --------的占位效果。如果你不想要任何占位符提示，可以将占位符字符留空。
第五步：配置自动跳过字面量
自动跳过字面量选项默认为开启状态（是）。在这种模式下，用户输入时无需手动输入空格、破折号等字面量字符，这些字符会在光标到达对应位置时自动填充。
建议保持此选项开启，因为它能显著提升用户的输入效率。只有在特殊情况下（如掩码中的字面量不是固定的分隔符而是有意义的输入内容）才需要关闭此选项。
第六步：实时预览与验证
在配置好掩码后，将注意力转移到实时预览区域。在预览输入框中尝试以下操作来验证掩码效果：
- 正常输入：在掩码的不同位置输入正确的字符类型，观察格式化效果是否符合预期。
- 错误输入：在数字位置尝试输入字母，确认字母被正确拒绝。在字母位置尝试输入数字，确认数字被正确拒绝。
- 退格删除：输入一段内容后按退格键，观察删除行为是否正确，特别是字面量是否被自动跳过。
- 粘贴测试：复制一段数字后在输入框中粘贴，观察粘贴内容是否被正确格式化。
预览区域下方会显示「原始值」，即去掉所有字面量后的纯输入内容。例如在电话掩码中输入(123) 456-7890，原始值会显示1234567890。这对于需要提取干净数据的场景很有参考价值。
第七步：生成并复制JavaScript代码
当你对预览效果满意后，向下滚动到JavaScript代码区域。代码框中已经自动生成了完整的JavaScript代码。点击「复制」按钮，代码会被复制到剪贴板。
生成的代码包含两个核心部分：initInputMask函数的完整定义，以及一个示例调用。你需要将这两部分都复制到你的项目中。
第八步：集成到项目中
将复制的代码粘贴到你的HTML文件的script标签中，或者作为独立的JavaScript文件引入。然后在你的HTML输入框元素上设置对应的id或类名，最后调用initInputMask函数即可。
示例：假设你的HTML中有一个输入框，你在JavaScript代码中调用initInputMask('#phone', '(999) 999-9999')，该输入框就会自动启用电话号码掩码。当用户在该输入框中键入数字时，输入内容会自动格式化为(123) 456-7890的形式。
进阶用法：为多个输入框配置不同掩码
在实际项目中，你可能需要为多个输入框分别配置不同的掩码。使用initInputMask函数可以轻松实现这一点。只需为每个输入框调用一次函数，传入不同的选择器和掩码模式即可。
例如，一个完整的联系信息表单可能包含手机号、邮政编码和出生日期三个格式化输入框。你可以分别调用三次initInputMask：第一次为手机号输入框设置999 9999 9999掩码，第二次为邮政编码输入框设置99999掩码，第三次为出生日期输入框设置9999/99/99掩码。每次调用都是独立的，互不影响。
进阶用法：自定义掩码模式
掩码语法的灵活性使得你可以创建各种自定义格式。以下是一些实用的自定义掩码示例：
- IP地址：999.999.999.999（允许1到3位数字的每个段）
- 时间格式：99:99（24小时制时间，时:分）
- 产品序列号：aaa-9999-**（字母前缀加数字编号加混合后缀）
- 金额输入：¥999,999.99（带货币符号和千位分隔符）
- 身份证号：999999 999999 9999（18位身份证号）
编写自定义掩码时，建议先在预览区域中充分测试，确保掩码在各种输入场景下都能正确工作，特别是边界情况（如输入框为空、输入内容超出掩码长度、中途修改等）。
常见问题排查
在使用过程中，如果遇到掩码不符合预期的情况，请检查以下几点：
- 掩码语法错误：确保只有9、a、*被用作可输入占位符，其他字符都会被视为字面量。
- 掩码过长或过短：掩码中的可输入位置数量决定了最大输入长度。如果掩码太短无法容纳完整数据，或者太长导致输入不便，请调整掩码长度。
- 光标跳动异常：如果自动跳过字面量开启时光标行为异常，尝试先清空预览区再重新输入。
- 粘贴内容格式不对：粘贴时工具会自动过滤掉不符合掩码规则的字符。如果粘贴后格式不对，可能是因为粘贴内容中包含了无法被掩码接受的字符。