向表单添加输入掩码的最简单方法

输入掩码使用户更容易找出填写电子邮件，电话号码，信用卡和其他数据所需的格式。在表单输入中添加掩码可以使它们变得更好，而且超级容易实现，尤其是在使用JS库时。

在本文中，我们为您准备了一个Bootstrap 4表单模板，该模板具有开箱即用的即用型输入掩码。就像我们所有的演示代码一样

模板

该模板完全由Bootstrap 4组件构建。它具有简洁现代的设计，HTML完全符合框架要求，并且CSS完全独立，因此使用它时，它不会破坏其余样式。

我们已经使用jQuery Mask Plugin为表单字段创建输入掩码。它真的很容易使用和实现，并且有很多自定义选项。

如何使用

要使用模板，请按照以下简单步骤操作：

1. 从页面顶部附近的“下载”按钮中获取zip存档，并将其解压缩。
2. 将HTML粘贴到您的项目中。确保该页面上有Bootstrap 4。
3. 样式位于单独的CSS文件中。链接到文件或复制其内容并将其添加到您的样式中。
4. 添加jQuery Mask Plugin CSS和JS文件，并在脚本标签中对其进行初始化-$('#birth-date').mask('00/00/0000'); 确保在jQuery之后包含Mask Plugin。

Bootstrap Studio中的输入蒙版

设置输入掩码的另一种快速方法是使用Bootstrap Studio。该应用程序使创建正确的HTML，包括JavaScript库以及根据您的喜好配置遮罩变得非常容易。