jQuery Mask Plugin 是一个方便的 jQuery 插件,它可以给输入框添加掩码。它可以用来格式化日期、时间、电话号码等等。以下是使用 jQuery Mask 插件的完整攻略。
安装
你可以通过几种不同的方式安装 jQuery Mask 插件:
- 使用 npm 安装:
npm install jquery-mask-plugin --save
- 下载插件源文件,并将其链接到你的 HTML 文件中:
“`
“`
基本使用
使用 jQuery Mask 插件非常简单。只需按照以下步骤设置:
- 选择要添加掩码的输入框。
var input = $('#my-input');
- 添加掩码。例如,要在输入框中添加电话掩码,你可以使用以下代码:
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 输入框中。你只需选择输入框并使用相应的掩码即可。你可以使用掩码来格式化日期、电话号码等等。