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

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

输入掩码使用户更容易找出填写电子邮件,电话号码,信用卡和其他数据所需的格式。在表单输入中添加掩码可以使它们变得更好,而且超级容易实现,尤其是在使用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库以及根据您的喜好配置遮罩变得非常容易。

分享到 :
相关推荐

发表评论

电子邮件地址不会被公开。