JavaScript 纯代码实现输入文本掩码：信用卡、邮编与电话格式示例
本文介绍如何使用纯 JavaScript 实现无需插件的输入文本掩码功能。通过具体示例，演示如何自动格式化信用卡号、邮政编码及电话号码，包括自动添加空格、括号和分隔符。文章涵盖模式定义、占位符设置及自定义规则调整，帮助开发者提升数据录入体验与准确性。
JavaScript 输入掩码（或称掩码文本框）是一种用户界面控件，旨在通过基于标准掩码的规则，为用户提供一种简单且可靠的数据收集方式。例如，它可用于规范电话号码、日期值、信用卡号以及其他符合特定格式标准的数据输入。
在某些业务场景下，需要限制用户仅以特定格式输入指定类型的数据。例如，邮政编码和信用卡信息的录入通常遵循严格的模式，此时通过掩码可以强制约束数据的格式规范。
借助输入屏蔽库，开发者可以限制用户在使用特定数据格式时，对输入字段进行屏蔽处理。
该 JavaScript 模块在屏蔽输入字段时，会自动插入空格、破折号及其他指定字符。这样一来，用户只需专注于输入数字或字母，无需手动处理格式符号。
当 Web 界面涉及大量数据录入操作时，这种自动格式化处理显得尤为实用。
通过下方的示例，您可以了解如何在网页中配置并使用该库。
JavaScript 信用卡号输入掩码实现
本示例展示了信用卡号的一般格式规范。用户尝试输入数字和字母时，无需手动添加空格。
如截图所示，系统会自动插入所需的空格。
您可以查看下方的代码以了解具体实现。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/masking-input/masking-input.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<style>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="cc">Credit Card Number</label>
<input id="cc" type="tel" name="ccnum" placeholder ="XXXX XXXX XXXX XXXX" pattern="\d{4} \d{4} \d{4} \d{4}" class="masked" title="Enter the 16 digits of credit card">
</li>
</ul>
<script src="js/maskinginput/maskinginput.js" data-autoinit="true"></script>
</body>
</html>JavaScript 邮政编码输入掩码实现
邮政编码由字母和数字混合组成，因此这是一个典型的输入屏蔽案例。用于输入邮政编码的占位符旨在提示用户哪些位置需要字符，哪些需要数字。
请参考下方的屏幕截图。
您会注意到占位符中使用了“A1B2C3”而非简单的“X”，这清晰地标示了所需的格式。用户无需手动插入空格，只需按正确格式连续输入代码即可。
下方给出了创建邮政编码输入屏蔽字段所需的 HTML 标记。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/masking-input/masking-input.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<style>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="zipca">Enter zip code</label>
<input id="zipca" type="text" name="zipcode" placeholder="A1B2C3" pattern="\w\d\w\d\w\d" class="masked" datacharset="_X_ X_X" title="Enter zip code">
</li>
</ul>
<script src="js/mask-input/mask-input.js" data-autoinit="true"></script>
</body>
</html>JavaScript 电话号码输入掩码（含括号处理）
在此示例中，电话字段应用了掩码，脚本会自动管理括号的显示。效果如截图所示。
下方提供了相关代码。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/masking-input/masking-input.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<style>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="tel">Enter Phone</label>
<input id="tel" type="tel" name="phone number" placeholder="(XXX) XXX-XXXX" pattern="\(\d{3}\) \d{3}\-\d{4}" class="masked" title="Enter number without parenthesis">
</li>
</ul>
<script src="js/mask-input/mask-input.js" data-autoinit="true"></script>
</body>
</html>JavaScript 中不同字段的输入掩码自定义
在上述所有示例中，最关键的部分在于模式（pattern）的定义。例如，电话示例中的输入字段使用了以下模式定义。
pattern="\(\d{3}\) \d{3}\-\d{4}"若希望用户在括号内输入四位数字而非三位，只需将模式中的对应部分改为 4。为了展示如何自定义输入字段，我们还将添加另一个破折号，使模式调整为如下形式。
pattern="\(\d{4}\) \d{3}\--\d{4}"用户还需在占位符（placeholder）中做相应更改。
placeholder="(XXXX) XXX--XXXX"下方截图展示了更改后的效果。
下方给出了更新后的代码。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/masking-input/masking-input.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<style>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="tel">Enter Phone</label>
<input id="tel" type="tel" name="phone number" placeholder="(XXXX) XXX--XXXX" pattern="\(\d{4}\) \d{3}\--\d{4}" class="masked" title="Enter number without parenthesis">
</li>
</ul>
<script src="js/mask-input/mask-input.js" data-autoinit="true"></script>
</body>
</html>同样，用户也可以通过添加所需的格式数字或字符来自由调整掩码规则。
至此，关于使用 JavaScript 在不依赖插件的情况下实现输入文本掩码的介绍已完成。如需了解更多 JS 输入文本掩码相关内容，请搜索本站历史文章或继续浏览后续文章。感谢大家的支持！
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别：JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
JavaScript新手常犯的编码错误与最佳实践指南
2026-11-04 22:12:38