npm 包 inputmask 使用教程-JavaScript中文网-JavaScript教程资源分享门户

输入框控制非常重要，inputmask 就是一款非常出色的输入控制插件，它可以很方便的限制用户输入的格式。在前端开发中，我们经常需要对用户输入进行校验，这时候使用 inputmask 就是一个不错的选择。

什么是 inputmask？

inputmask 是一个轻量级的 jQuery 插件，它可以很方便的控制输入框中输入的字符格式。它支持各种不同的输入类型，包括日期、时间、电话号码、ZIP 码等等。

如何安装 inputmask？

inputmask 可以通过 npm 安装，只需要在命令行中输入以下指令即可：

npm install inputmask --save

怎么使用 inputmask？

在 HTML 页面中引入 inputmask 的 JS 和 CSS 文件：

<head>
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  
  <script src="/path/to/jquery.inputmask.js"></script>
  
  <link rel="stylesheet" href="/path/to/jquery.inputmask.css"/>
</head>

在 HTML 页面中添加一个输入框：

<input type="text" name="phone" class="phone-input" placeholder="请输入您的手机号码"/>

在 JavaScript 中使用 inputmask 插件，对输入框进行格式控制：

$(document).ready(function(){
  $('.phone-input').inputmask({
    "mask": "(999) 999-9999"
  });
});

在页面中测试输入框，看看格式控制是否生效。

inputmask 常用的格式控制配置

数字

0：阿拉伯数字，必填项
9：阿拉伯数字，可以为空
#：阿拉伯数字和负号，可以为空

字母和字母数字混合

a：仅允许小写字母。
A：仅允许大写字母。
9：仅允许字母和数字。

日期

dd：日 (2 位数字)
mm：月 (2 位数字)
yy：年 (2 位数字)
yyyy：年 (4 位数字)
hh：小时 (2 位数字，12 小时制)
HH：小时 (2 位数字，24 小时制)
MM：分钟 (2 位数字)
ss：秒 (2 位数字)

示例代码

以下是一个实现控制输入框输入的示例代码：

-- -------------------- ---- -------
--------- -----
------
------
  ---------- - --------- ------------
  ----- ----------------
  ------- ------------------------------------------------------
  ------- -------------------------------------------------------------------
  ----- ---------------- -----------------------------------------------------
-------
------
  ------------------
  ------ ----------- ------------ ------------------- -------------------------
  --------
    -----------------------------
      -----------------------------
        ------- ------ ---------
      ---
    ---
  ---------
-------
-------

总结

inputmask 插件可以很方便的控制用户输入的格式，使得输入框的输入更为规范。我们可以通过 npm 安装 inputmask，使用非常简单，只需要引入 JS 和 CSS 文件，并在 JavaScript 中进行配置即可。如果您在前端开发中需要对用户输入进行格式校验，那么 inputmask 是一款非常值得尝试的插件。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/163923