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

介绍

在前端开发中，输入框的格式化是一个非常常见的需求。一个常见的做法是通过输入框的 oninput 事件监听用户的输入，然后在输入框中实时插入格式化后的字符。但是，这个过程非常繁琐，需要写很多复杂的正则表达式和逻辑，而且容易出现边界问题。

inputmask-core-edited 帮助我们解决这个问题。它是一个基于 JavaScript 的输入框格式化工具，可以使用缩写来轻松定义输入框的格式化规则。例如，我们可以将 9999-99-99 99:99:99 定义为日期时间格式。

安装

inputmask-core-edited 是一个基于 NPM 发布的包，可以通过以下命令进行安装：

npm install inputmask-core-edited

使用

基本用法

我们可以在页面中引入 inputmask-core-edited：

<script src="path/to/inputmask-core-edited.js"></script>

或者，在项目中使用模块化工具（如 webpack）引入：

import Inputmask from 'inputmask-core-edited'

然后，我们可以通过实例化 Inputmask 并将其传递给输入框来格式化输入：

<input type="text" id="input" />

<script>
  const inputEl = document.getElementById('input')
  const inputmask = new Inputmask({ mask: '9999-99-99' })
  inputmask.mask(inputEl)
</script>

在以上代码中，我们创建了一个 Inputmask 实例，并将日期格式的缩写 9999-99-99 传递给它。接着，我们将这个实例应用到了一个输入框上。这样，用户在输入日期时会自动按照该格式进行格式化。

高级用法

inputmask-core-edited 提供了很多选项来满足不同的需求。下面是一些常用的高级用法：

自定义输入字符

默认情况下，输入框只能包含缩写中指定的字符。如果我们需要输入额外的字符，可以通过 placeholderChar 选项进行配置：

const inputmask = new Inputmask({
  mask: '9999-99-99',
  placeholderChar: '0'
})

取消清除

默认情况下，输入框在首次聚焦时，已输入的内容将被清除。如果我们需要保留已输入内容，可以通过 clearMaskOnLostFocus 选项进行配置：

const inputmask = new Inputmask({
  mask: '9999-99-99',
  clearMaskOnLostFocus: false
})

自定义分隔符

默认情况下，inputmask-core-edited 在缩写中使用了 - 作为日期格式的分隔符。如果我们需要使用其他分隔符，可以通过在缩写中传递正则表达式来实现：

const inputmask = new Inputmask({
  mask: /(\d{4})[/\.](\d{2})[/\.](\d{2})/,
  placeholderChar: '_'
})

在这个例子中，我们使用正则表达式定义了日期格式（支持 / 和 . 作为分隔符），并将占位符字符设置为 _。

实时回调

inputmask-core-edited 支持在用户输入时实时调用回调函数。我们可以使用 oncomplete 或 onincomplete 选项指定这些回调函数。例如，在输入框中输入完整的日期后输出一个提示：

const inputmask = new Inputmask({
  mask: '9999-99-99',
  oncomplete: (e) => {
    console.log('完成输入：', e.target.value)
  }
})

示例代码

下面是一个完整的使用 inputmask-core-edited 的示例代码：

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

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

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

总结

inputmask-core-edited 是一个非常方便的输入框格式化工具，通过缩写语法简化了输入框格式化的实现。本文介绍了该工具的基本用法和一些常用的高级用法，并给出了代码示例。希望可以帮助您在实际应用中更好地使用该工具。

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