博客

jQuery Mask 插件

  • Post category:jquery

jQuery Mask Plugin 是一个方便的 jQuery 插件，它可以给输入框添加掩码。它可以用来格式化日期、时间、电话号码等等。以下是使用 jQuery Mask 插件的完整攻略。

安装

你可以通过几种不同的方式安装 jQuery Mask 插件：

  1. 使用 npm 安装：

npm install jquery-mask-plugin --save

  1. 下载插件源文件，并将其链接到你的 HTML 文件中：

“`

“`

基本使用

使用 jQuery Mask 插件非常简单。只需按照以下步骤设置：

  1. 选择要添加掩码的输入框。

var input = $('#my-input');

  1. 添加掩码。例如，要在输入框中添加电话掩码，你可以使用以下代码：

input.mask('(000) 000-0000');

这将在输入框中添加电话号码的掩码。用户每输入一个数字，就会自动添加括号、连字符和空格。如果用户输入错误的字符，输入框将不会接受它们。

示例

以下是两个示例，展示如何使用 jQuery Mask 插件。

示例 1：日期掩码

以下是一个日期掩码的示例。它将输入框格式化为日期，以便用户只能输入数字和日期分隔符：

<!DOCTYPE html>
<html>
  <head>
    <title>Date Mask</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
  </head>
  <body>
    <h1>Date Mask Example</h1>

    <label for="date">Enter date</label>
    <input type="text" id="date" name="date">

    <script>
      $(function() {
        $('#date').mask('00/00/0000');
      });
    </script>
  </body>
</html>

在此示例中，我们选择了 ID 为 “date” 的输入框，并将其设置为仅接受数字和日期分隔符。用户输入 8 个数字后，输入框将自动添加日期分隔符。

示例 2：电话掩码

以下是一个电话掩码的示例。它要求用户输入一个有效的北美电话号码：

<!DOCTYPE html>
<html>
  <head>
    <title>Phone Mask</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
  </head>
  <body>
    <h1>Phone Mask Example</h1>

    <label for="phone">Enter phone number</label>
    <input type="text" id="phone" name="phone">

    <script>
      $(function() {
        $('#phone').mask('(000) 000-0000');
      });
    </script>
  </body>
</html>

在此示例中，我们选择了 ID 为 “phone” 的输入框，并将其设置为接受北美电话掩码。用户输入每个数字后，输入框将自动添加括号、连字符和空格。

结论

如你所见，使用 jQuery Mask 插件可以非常容易地添加掩码到 HTML 输入框中。你只需选择输入框并使用相应的掩码即可。你可以使用掩码来格式化日期、电话号码等等。

Tags: