阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.inputmask 中文API文档

      插件 jQuery.inputmask 中文API文档 https://github.com/RobinHerbots/Inputmask

      输入掩码

      nputmask 是一个创建输入掩码的 javascript 库。Inputmask 可以针对 vanilla javascript,jQuery 和 jqlite 运行。

      输入掩码通过确保预定义格式来帮助用户输入。这可用于日期,数字,电话号码,……

      强调:

      • 使用方便
      • 任选部件都在面具中
      • 定义隐藏复杂性的别名的可能性
      • 日期 / 日期时间掩码
      • 数字面具
      • 很多回调
      • 非贪婪的面具
      • 可以通过选项启用 / 禁用 / 配置许多功能
      • 支持 readonly / disabled / dir =“rtl”属性
      • 支持 data-inputmask 属性
      • 交流发电机面罩
      • 正则表达式面罩
      • 动态遮罩
      • 预处理面罩
      • JIT 掩蔽
      • 没有输入元素的值格式化 / 验证
      • AMD / CommonJS 支持
      • dependencyLibs:vanilla javascript,jQuery,jqlite
      • Android 支持

      演示页面见 http://robinherbots.github.io/Inputmask

      感谢 Jetbrains 为其出色的 Webstorm IDE 提供免费许可。

      建立

      dependencyLibs

      Inputmask 可以针对不同的 javascript 库运行。你可以选择:

      • inputmask.dependencyLib(vanilla)
      • inputmask.dependencyLib.jquery
      • inputmask.dependencyLib.jqlite
      • ….(欢迎其他人)

      带有< script>标签的经典 Web

      包括您可以在 dist 文件夹中找到的 js 文件。

      使用 jQuery 作为 dependencylib 的输入掩码。

      <script src="jquery.js"></script>
      <script src="dist/jquery.inputmask.js"></script>
      
      

      带有 vanilla dependencylib 的输入掩码。

      <script src="dist/inputmask.js"></script>
      
      

      如果您想自动将输入掩码绑定到使用 data-inputmask- … 属性标记的输入,您可能还需要包含 inputmask.binding.js

      <script src="dist/bindings/inputmask.binding.js"></script>
      
      

      WebPack

      安装包

      npm install inputmask --save
      
      

      安装最新的测试版

      npm install inputmask@next --save
      
      

      在你的模块中

      如果要包含 Inputmask 和所有扩展名。

      var Inputmask = require('inputmask');
      //es6
      import Inputmask from "inputmask";
      
      

      对于个人扩展。每个扩展都会导出 Inputmask,因此您只需要导入扩展名。见例子。

      require("inputmask/lib/extensions/inputmask.numeric.extensions");
      var Inputmask = require("inputmask/lib/extensions/inputmask.date.extensions");
      
      //es6
      import "inputmask/lib/extensions/inputmask.numeric.extensions";
      import Inputmask from "inputmask/lib/extensions/inputmask.date.extensions";
      
      

      选择 dependencyLib

      默认情况下,使用 vanilla dependencyLib。您可以通过在 webpack.config 中创建别名来选择另一个依赖项。

       resolve: {
              alias: {
                  "./dependencyLibs/inputmask.dependencyLib": "./dependencyLibs/inputmask.dependencyLib.jquery"
              }
          },
      
      

      用法

      通过 Inputmask 类

      var selector = document.getElementById("selector");
      
      var im = new Inputmask("99-9999999");
      im.mask(selector);
      
      //or
      
      Inputmask({"mask": "(999) 999-9999", .... other options .....}).mask(selector);
      Inputmask("9-a{1,3}9{1,3}").mask(selector);
      Inputmask("9", { repeat: 10 }).mask(selector);
      
      Inputmask({ regex: "\\d*" }).mask(selector);
      Inputmask({ regex: String.raw`\d*` }).mask(selector);
      

      通过 jquery 插件

      $(document).ready(function(){
        $(selector).inputmask("99-9999999");  //static mask
        $(selector).inputmask({"mask": "(999) 999-9999"}); //specifying options
        $(selector).inputmask("9-a{1,3}9{1,3}"); //mask with dynamic syntax
      });
      

      通过 data-inputmask 属性

      <input data-inputmask="'alias': 'datetime'" />
      <input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
      <input data-inputmask="'mask': '99-9999999'" />
      
      $(document).ready(function(){
        $(":input").inputmask();
        or
        Inputmask().mask(document.querySelectorAll("input"));
      });
      

      任何选项也可以通过使用数据属性来传递。使用 data-inputmask- < 选项名称 > =“value”

      <input id="example1" data-inputmask-clearmaskonlostfocus="false" />
      <input id="example2" data-inputmask-regex="[a-za-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?" />
      $(document).ready(function(){
        $("#example1").inputmask("99-9999999");
        $("#example2").inputmask();
      });
      

      允许的 HTML 元素

      • < input type=“text”>
      • < input type=“search”>
      • < input type=“tel”>
      • < input type=“url”>
      • < input type=“password”>
      • < div contenteditable=“true”> (以及所有其他人都满意的支持)
      • < textarea>
      • 任何 html 元素(掩码文本内容或使用 jQuery.val 设置 maskedvalue)

      允许的输入类型在 supportsInputType 选项中定义。另见(input-type-ref)

      默认屏蔽定义

      • 9 :数字
      • a :按字母顺序排列
      • * :字母数字

      扩展中定义了更多定义。 您可以在 js 文件中查找信息或进一步浏览选项。

      掩蔽类型

      静电面具

      这些是掩蔽的基础。掩码已定义,并且在输入期间不会更改。

      $(document).ready(function(){
        $(selector).inputmask("aa-9999");  //static mask
        $(selector).inputmask({mask: "aa-9999"});  //static mask
      });
      
      

      可选面具

      可以将掩码中的某些部分定义为可选。这是通过使用 [] 完成的。

      例:

      $('#test').inputmask('(99) 9999[9]-9999');
      
      

      这个面具将允许输入像 (99) 99999-9999 或 (99) 9999-9999。

      输入 => 12123451234 掩码 =>(12)12345-1234(触发完成) 输入 => 121234-1234 掩码 =>(12)1234-1234(触发完成) 输入 => 1212341234 掩码 =>(12)12341-234_(触发不完整)

      skipOptionalPartCharacter

      另外还有另一个可配置字符,用于跳过掩码中的可选部分。

      skipOptionalPartCharacter: " "
      
      

      输入 => 121234 1234 mask =>(12)1234-1234(触发完成)

      当 clearMaskOnLostFocus: true 在选项中设置时(默认),当未填充时,掩码将清除可选部分,这仅在可选部分位于掩码末尾时才会清除。

      例如,给定:

      $('#test').inputmask('999[-AAA]');
      
      

      虽然该字段具有焦点并且为空白,但用户将看到完整的掩码___-___。当填充掩模的所需部分并且场失去焦点时,用户将看到 123。当填充掩模的必需部分和可选部分并且场失去焦点时,用户将看到 123-ABC。

      贪婪假的可选面具

      当使用 greedy:false 选项定义可选掩码时,输入掩码将首先显示最小可能掩码作为输入。

      $(selector).inputmask({ mask: "9[-9999]", greedy: false });
      
      

      显示的初始掩码将是“ _ ”而不是“ _ -____”。

      动态面具

      动态蒙版可以在输入期间更改。要定义动态部分,请使用{}。

      $(document).ready(function(){
        $(selector).inputmask("aa-9{4}");  //static mask with dynamic syntax
        $(selector).inputmask("aa-9{1,4}");  //dynamic mask ~ the 9 def can be occur 1 to 4 times
      
        //email mask
        $(selector).inputmask({
          mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]",
          greedy: false,
          onBeforePaste: function (pastedValue, opts) {
            pastedValue = pastedValue.toLowerCase();
            return pastedValue.replace("mailto:", "");
          },
          definitions: {
            '*': {
              validator: "[0-9A-Za-z!#$%&'*+/=?^_`{|}~\-]",
              casing: "lower"
            }
          }
        });
        //decimal mask
         Inputmask("(.999){+|1},00", {
              positionCaretOnClick: "radixFocus",
              radixPoint: ",",
              _radixDance: true,
              numericInput: true,
              placeholder: "0",
              definitions: {
                  "0": {
                      validator: "[0-9\uFF11-\uFF19]"
                  }
              }
         }).mask(selector);
      });
      

      交流发电机面罩

      交流发电机语法类似于 OR 语句。掩模可以是交流发电机中指定的 3 种选择之一。

      要定义交流发电机,请使用|。例如:“a | 9”=> a 或 9“(aaa)|(999)”=> aaa 或 999“(aaa | 999 | 9AA)”=> aaa 或 999 或 9AA

      另外,请务必阅读有关 keepStatic 选项的信息。

      $("selector").inputmask("(99.9)|(X)", {
        definitions: {
          "X": {
            validator: "[xX]",
            casing: "upper"
          }
        }
      });
      
      

      要么

      $("selector").inputmask({
        mask: ["99.9", "X"],
        definitions: {
          "X": {
            validator: "[xX]",
            casing: "upper"
          }
        }
      });
      
      

      预处理掩码

      您可以将掩码定义为可以允许预处理结果掩码的函数。示例排序多个掩码或通过 ajax 动态检索掩码定义。预处理 fn 应返回有效的掩码定义。

      $(selector).inputmask({ mask: function () { /* do stuff */ return ["[1-]AAA-999", "[1-]999-AAA"]; }});
      
      

      JIT Masking

      及时掩盖。使用 jitMasking 选项,您可以启用 jit masking。只有用户输入的字符才能看到遮罩。默认值:false

      值可以是 true 或阈值数或 false。

      Inputmask("datetime", { jitMasking: true }).mask(selector);
      
      目录
      目录