阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.maskedinput 中文 API 文档

      插件 jQuery.maskedinput 中文 API 文档 https://github.com/digitalBush/jquery.maskedinput

      jQuery 的蒙面输入插件

      注意:此项目不再维护。

      我在十多年前开始这个项目,以填补我当时正在进行的项目的需求。什么都没有成为那个侧面项目,但这个小插件继续存在。多年来,它让我很高兴在使用这个东西的网站上绊倒。听到人们在他们自己的产品中使用它是非常令人鼓舞的。即使在我离开前端 Web 开发之后,我也尝试了一段时间来维护它。

      现在是正式宣布退出的时候了。网络已经改变了(A LOT),还有更好的东西,比如 Cleave.js。我会把这个回购留给处于存档状态的子孙后代。感谢所有多年来贡献或使用此插件的人。

      概观

      这是 jQuery javascript 库的屏蔽输入插件。它允许用户更容易地输入固定宽度输入,您希望他们以特定格式(日期,电话号码等)输入数据。它已经在 Internet Explorer,Firefox,Safari,Opera 和 Chrome 上进行了测试。掩码由掩码文字和掩码定义组成的格式定义。不在下面定义列表中的任何字符都被视为掩码文字。屏幕文字将在用户输入时自动输入,用户将无法删除。以下屏蔽定义是预定义的:

      a - 表示字母字符(AZ,az) 9 - 表示数字字符(0-9) * - 表示字母数字字符(AZ,az,0-9)

      用法

      首先,包括 jQuery 和蒙版输入 javascript 文件。

      <script src="jquery.js" type="text/javascript"></script>
      <script src="jquery.maskedinput.js" type="text/javascript"></script>
      

      接下来,为您希望屏蔽的项目调用 mask 功能。

      jQuery(function($){
         $("#date").mask("99/99/9999");
         $("#phone").mask("(999) 999-9999");
         $("#tin").mask("99-9999999");
         $("#ssn").mask("999-99-9999");
      });
      
      

      (可选)如果您对下划线('_')字符作为占位符不满意,则可以将可选参数传递给 maskedinput 方法。

      jQuery(function($){
         $("#product").mask("99/99/9999",{placeholder:" "});
      });
      
      

      (可选)如果要在完成掩码后执行函数,可以将该函数指定为 maskedinput 方法的可选参数。

      jQuery(function($){
         $("#product").mask("99/99/9999",{completed:function(){alert("You typed the following: "+this.val());}});
      });
      

      (可选)如果要禁用自动丢弃未完成输入,可以将可选参数传递给 maskedinput 方法

      jQuery(function($){
         $("#product").mask("99/99/9999",{autoclear: false});
      });
      
      

      您现在可以提供自己的蒙版定义。

      jQuery(function($){
         $.mask.definitions['~']='[+-]';
         $("#eyescript").mask("~9.99 ~9.99 999");
      });
      
      

      您可以选择部分面具。在'?‘之后列出的任何东西 掩码内被认为是可选的用户输入。常见的例子是电话号码 + 可选扩展名。

      jQuery(function($){
         $("#phone").mask("(999) 999-9999? x99999");
      });
      
      

      如果预定义占位符未满足您的要求,您始终可以添加自己的要求。例如,您可能需要一个仅允许十六进制字符的掩码。你可以为占位符添加你自己的定义,比如’h’,就像这样:$.mask.definitions[‘h’] = “[A-Fa-f0-9]"; 然后你可以使用它来掩盖像 css 颜色这样的东西,用十六进制表示 mask “#hhhhhh”。

      jQuery(function($){
         $("#phone").mask("#hhhhhh");
      });
      

      根据设计,此插件将拒绝未完成掩码的输入。您可以使用'?‘来绕过这个 您想要考虑输入的位置的字符可选。例如,“(999)999-9999?x99999”的掩码仅需要电话号码的前 10 位数字,扩展名是可选的。

      获得位

      我们通常建议您使用 bower 来安装 jquery.maskedinput 插件。

      $ bower install --save jquery.maskedinput
      
      

      设置开发人员环境

      jQuery 的蒙面输入使用的 NodeJS 和 GruntJS,因为它的开发平台和构建自动化工具。

      要正确设置环境,您需要安装 nodejs 版本 0.8.25 或更高版本。您还需要安装 grunt 命令行工具:

      $ sudo npm install -g grunt-cli
      
      

      一旦在您的系统上安装了节点,您需要做的就是安装开发人员依赖项并运行 grunt 构建:

      $ npm install
      $ grunt
      
      目录
      目录