输入掩码使用户更容易找出填写电子邮件,电话号码,信用卡和其他数据所需的格式。在表单输入中添加掩码可以使它们变得更好,而且超级容易实现,尤其是在使用JS库时。
在本文中,我们为您准备了一个Bootstrap 4表单模板,该模板具有开箱即用的即用型输入掩码。就像我们所有的演示代码一样
模板
该模板完全由Bootstrap 4组件构建。它具有简洁现代的设计,HTML完全符合框架要求,并且CSS完全独立,因此使用它时,它不会破坏其余样式。
我们已经使用jQuery Mask Plugin为表单字段创建输入掩码。它真的很容易使用和实现,并且有很多自定义选项。

如何使用
要使用模板,请按照以下简单步骤操作:
- 从页面顶部附近的“下载”按钮中获取zip存档,并将其解压缩。
- 将HTML粘贴到您的项目中。确保该页面上有Bootstrap 4。
- 样式位于单独的CSS文件中。链接到文件或复制其内容并将其添加到您的样式中。
- 添加jQuery Mask Plugin CSS和JS文件,并在脚本标签中对其进行初始化-
$('#birth-date').mask('00/00/0000');
确保在jQuery之后包含Mask Plugin。
Bootstrap Studio中的输入蒙版
设置输入掩码的另一种快速方法是使用Bootstrap Studio。该应用程序使创建正确的HTML,包括JavaScript库以及根据您的喜好配置遮罩变得非常容易。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。