使用 JavaScript 在没有插件的情况下输入文本屏蔽

码农六六

已于 2022-10-28 19:15:00 修改

阅读量253

点赞数

分类专栏： JavaScriipt学习日记文章标签： javascript 开发语言 ecmascript

于 2022-08-20 09:50:36 首次发布

原文链接：https://www.delftstack.com/howto/javascript/javascript-input-mask/

版权

JavaScriipt学习日记专栏收录该内容

17 篇文章 3 订阅

订阅专栏

JavaScript 输入掩码或掩码文本框是一种控件，它为用户提供了一种简单可靠的方式来收集基于标准掩码的输入。例如，它允许您捕获电话号码、日期值、信用卡号和其他标准格式值。

在某些情况下，您可能需要允许用户仅以特定格式输入特定数据。例如，邮政编码和信用卡条目属于特定模式，您可以在其中限制特定数据格式。

输入屏蔽库允许用户使用特定的数据输入格式屏蔽输入字段。

这个用于屏蔽输入字段的 JavaScript 模块将自动输入空格、破折号和其他字符。因此，用户可以只专注于输入数字或字母。

当需要使用 Web 界面的数据输入操作员进行许多输入时，这尤其有用。

通过浏览下面给出的示例，您将了解如何在您的网页上设置此库：

1.JavaScript中信用卡号的输入掩码

在此示例中，给出了信用卡的一般格式。用户可以尝试在不输入空格的情况下输入数字和字母。

您将看到空格是自动添加的，如下面的屏幕截图所示。

您可以在下面访问此示例的代码。

<!doctype html>
<html>
<head>

  <link rel="stylesheet" href="css/masking-input/masking-input.css"/>
  <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>

2.JavaScript中信输入密码屏蔽

邮政编码是字母数字的混合体，因此这是输入屏蔽的一个有趣案例。输入邮政编码的占位符是为了让用户知道是需要字符还是数字。

请参阅下面的屏幕截图。

X您看到的不是在占位符中使用，而是A1B2C3被使用，因此您知道所需的格式。你也不需要进入空间；继续以正确的格式输入代码。

下面给出了用于创建邮政编码输入屏蔽字段的标记。

<!doctype html>
<html>
<head>

  <link rel="stylesheet" href="css/masking-input/masking-input.css"/>
  <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>

3.JavaScript中带括号输入屏蔽的电话号码

在此示例中，电话字段将被屏蔽，脚本将管理括号。这显示在下面的屏幕截图中。

代码如下。

<!doctype html>
<html>
<head>

  <link rel="stylesheet" href="css/masking-input/masking-input.css"/>
  <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>

4.自定义javascript中不同字段的掩码

在上述所有实例中，最需要注意的是模式定义。例如，以下模式放置在上面电话示例的输入字段中。

pattern="\(\d{3}\) \d{3}\-\d{4}"

如果您想允许用户在括号中输入四位数字而不是 3，请将其更改为 4。为了显示如何自定义输入字段，您还将添加另一个破折号，因此该模式的外观如下：

pattern="\(\d{4}\) \d{3}\--\d{4}"

用户还需要在占位符中进行如下更改。

placeholder="(XXXX) XXX--XXXX"

下面给出了此屏幕截图。

代码如下。

<!doctype html>
<html>
<head>

  <link rel="stylesheet" href="css/masking-input/masking-input.css"/>
  <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>

同样，用户也可以通过添加所需格式的数字或字符来进行更改。