简介
jquery.meiomask 是一个可以用来格式化输入内容的 jQuery 插件。它可以让用户在输入时按照指定的格式，比如电话号码、邮政编码等，自动添加分隔符或者限制输入字符的范围。
本文将详细介绍如何使用 jquery.meiomask。
安装
jquery.meiomask 可以通过 npm 来进行安装：
npm install jquery.meiomask --save
然后在项目中引入 jquery.meiomask 的文件：
<script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/jquery.meiomask/dist/meiomask.min.js"></script>
使用
在需要格式化输入的表单元素上添加 data-mask 属性，并设置对应的格式即可。例如我们需要让用户输入 11 位手机号码，并在第3、第7位添加横线，代码如下：
<input type="text" name="phone" data-mask="999-9999-9999">
在页面加载完成后，执行以下 JavaScript 代码即可应用格式化：
$(function () {
$('input[data-mask]').each(function () {
$(this).mask($(this).attr('data-mask'));
});
});这个例子中使用到的是 999-9999-9999 格式，其中数字 9 表示用户可以输入的任意数字。当用户输入时，插件会自动添加横线，并且只允许输入数字。例如用户输入 13612345678，插件会自动转换为 136-1234-5678。
参数
除了 data-mask 属性外，插件还提供了更多参数可以定制格式化行为。以下是一些常用的参数：
translation：定义需要被格式化的字符和它们的替换规则，比如{9: /\d/}表示用正则表达式\d来匹配数字。placeholder：定义占位符，当用户没有输入时，显示占位符而不是空白。reverse：将用户输入的字符按照倒序进行格式化。
完整的参数列表可以查看官方文档。
示例代码
下面是一个完整的示例代码，展示如何使用 jquery.meiomask 对手机号码进行格式化：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------------- ----------
------- ------------------------------------------------------
------- -----------------------------------------------------------------
-------
------
----- -----------
------ -------------------------
------ ----------- ------------ ---------- --------------------------
----
------- -------------------------
-------
--------
---------- -- -
----------------------------------- -- -
--------------------------------------- -
------------ --- ------
------------ - --
-------- ----
---
---
---
---------
-------
-------当用户在手机号码输入框中输入 13612345678 时，插件会自动将其格式化为 1-361-234-5678。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37562