输入掩码生成器 - 在线表单输入格式JS生成

预设模板系统

输入掩码生成器内置了丰富的预设模板，覆盖了日常开发中最常用的掩码格式。用户无需从零开始配置，只需在预设模板区域点击对应的模板按钮，即可一键加载常用的掩码模式。预设模板涵盖了以下常见场景：

• 电话号码模板：包括北美格式(999) 999-9999、中国手机号格式999 9999 9999、带国际区号格式+99 999 999 9999等多种电话号码掩码，满足不同地区的电话号码格式化需求。
• 日期格式模板：包括YYYY/MM/DD、DD-MM-YYYY、MM/DD/YY等常见日期格式，使用数字位占位配合斜杠或破折号作为分隔符，引导用户按规范格式输入日期。
• 信用卡号码模板：标准的16位信用卡号码格式9999 9999 9999 9999，每四位一组用空格分隔，符合信用卡号的视觉分组习惯。
• 邮政编码模板：支持5位纯数字邮编99999和带连字符的9位邮编99999-9999两种格式。
• 其他常用模板：包括IP地址、社会保障号码、产品序列号等特定格式的掩码模板。

预设模板的引入大幅降低了使用门槛，即使是不了解掩码语法的用户，也能通过模板快速获得可用的掩码配置。同时，每个模板加载后用户仍可自由修改，模板仅作为起点而非限制。

掩码模式字符串配置

掩码模式字符串是输入掩码的核心配置项，它定义了输入框中每个位置允许输入的字符类型。工具提供了一个文本输入框，用户可以在此直接编写或编辑掩码模式字符串。掩码语法由以下四种元素组成：

• 数字占位符（9）：数字9表示该位置必须输入0到9之间的数字。如果用户尝试输入字母或其他字符，该字符会被拒绝。例如掩码99999999999表示必须输入恰好11位数字。
• 字母占位符（a）：字母a表示该位置必须输入A-Z或a-z之间的英文字母。数字和特殊字符无法输入到该位置。例如掩码aa-aa表示必须输入两个字母、一个破折号、再两个字母的格式。
• 字母数字占位符（*）：星号表示该位置可以输入字母或数字，是字母和数字的合并占位符。例如掩码**-**表示可以输入任意字母或数字的组合。
• 字面量字符：掩码字符串中除9、a、*之外的所有字符都被视为字面量，会在输入框的对应位置自动显示为固定文本，用户无需手动输入。常见的字面量包括括号()、破折号-、斜杠/、空格、加号+、冒号:等。例如掩码(999) 999-9999中，左括号、右括号、空格和破折号都是字面量。

这四种元素可以自由组合，构建出几乎任何格式的输入掩码。掩码语法的简洁性使得非技术人员也能在几分钟内掌握，同时其灵活性又足以应对各种复杂的格式化需求。

占位符字符配置

占位符字符是指在用户尚未输入时，掩码中各可输入位置显示的默认提示字符。工具允许用户自定义占位符字符，默认使用下划线_。用户可以根据项目风格将其修改为连字符-、点号.或任何其他字符。

占位符字符的作用是在用户开始输入之前，以视觉化的方式提示输入框的预期长度和格式。例如，当掩码为(999) 999-9999且占位符为_时，输入框会显示(___) ___-____，用户可以直观地看到总共需要输入10位数字。占位符字符的选择可以与项目的整体设计风格保持一致，例如极简风格的界面可能更倾向于使用点号作为占位符。

自动跳过字面量

自动跳过字面量是输入掩码中一项提升用户体验的重要功能。当此选项开启时，用户在输入过程中无需手动输入掩码中的字面量字符（如括号、破折号等），这些字符会在用户输入到对应位置时自动填充。

例如，当掩码为(999) 999-9999且自动跳过字面量开启时，用户只需连续输入10位数字即可。输入第1位数字时，左括号会自动出现在输入框开头；输入完第3位数字后，右括号和空格会自动出现；输入完第6位数字后，破折号会自动出现。整个过程流畅自然，用户完全不需要关心分隔符的位置。

当自动跳过字面量关闭时，用户需要手动输入掩码中的每一个字符，包括字面量。这种模式适用于用户可能不需要完整填写所有位置的场景，或者掩码中的字面量不是固定的格式化符号而是有意义的输入内容的情况。

实时预览

实时预览是输入掩码生成器的核心交互特性。在工具的预览区域中，用户可以即时看到掩码配置的实际效果。预览区域包含一个遵循当前掩码规则的真实输入框，用户可以在此直接键入内容，体验掩码的格式化行为。

预览区会实时显示原始值，即去掉所有字面量后的纯用户输入内容。这对于需要获取干净数据的场景非常有用，例如表单提交时通常只需要原始数字而不需要格式化的分隔符。用户可以通过「清空预览」按钮快速重置输入框，方便反复测试不同的输入方式。

JavaScript代码生成

当用户配置好满意的掩码模式后，工具会自动生成一段完整的JavaScript代码。生成的代码包含一个initInputMask函数，该函数封装了输入掩码的全部逻辑。代码使用标准的原生JavaScript编写，不依赖jQuery、React、Vue等任何第三方库，可以直接嵌入到任何HTML页面或JavaScript项目中。

生成的代码内部处理了以下关键场景：

• 键盘输入处理：监听input事件，根据掩码规则过滤和格式化用户输入的字符。
• 退格删除处理：监听keydown事件，在用户按下退格键时正确处理字面量的删除和光标位置的调整。
• 粘贴处理：监听paste事件，从粘贴内容中提取有效字符并按照掩码格式重新排列。
• 光标管理：在格式化过程中自动维护光标位置，确保光标始终处于正确的可输入位置。

用户只需将生成的代码复制到项目中，然后调用initInputMask(selector, maskPattern)即可为指定的选择器匹配的输入框启用掩码。例如initInputMask('#phone', '(999) 999-9999')会为id为phone的输入框启用北美电话号码掩码。为多个输入框启用掩码只需多次调用该函数即可。

掩码字符参考表

工具页面内嵌了一个掩码字符参考表，以表格形式清晰展示了每种掩码字符的含义、示例掩码和输入输出对照。参考表包括四种字符类型：9（数字）、a（字母）、*（字母数字）和其他字符（字面量）。每种类型都附带了具体的示例掩码和输入→输出对照，帮助用户快速理解和正确使用掩码语法。参考表的设计考虑到了新手用户的上手需求，使得即使从未接触过输入掩码的开发者也能在几秒钟内理解掩码的配置规则。