输入掩码 9 数字添加 - Javascript

在一些输入框中，我们需要输入特定的格式，如电话号码、身份证号码等。为了方便用户输入，我们可以使用输入掩码来限制输入格式。本篇文章将介绍如何用Javascript实现一个输入掩码来限制输入9位数字，并自动在第5位添加一个-符号。

实现思路

我们可以通过监听输入框的keypress事件来实现输入限制和添加-符号。具体步骤如下：

1. 监听输入框的keypress事件
2. 获取当前输入框中已经输入的内容
3. 判断输入内容是否为数字
4. 判断当前输入框是否已经有了-符号
5. 根据输入位置自动添加-符号

代码实现

// 获取输入框
let input = document.getElementById('myInput');

// 监听keypress事件
input.addEventListener('keypress', function (event) {
  // 获取当前输入框中的内容
  let value = this.value;
  // 获取当前按下的键对应的字符
  let char = String.fromCharCode(event.which);
  // 判断是否为数字
  if (/\d/.test(char)) {
    // 是否已经有了-符号
    let hasDash = value.includes('-');
    // 当前光标位置
    let cursorPos = this.selectionStart;
    // 如果已经有了-符号
    if (hasDash) {
      // 判断输入位置是否为5
      if (cursorPos === 5) {
        // 在输入位置自动添加-
        value = `${value.slice(0, cursorPos)}-${value.slice(cursorPos)}`;
        // 更新输入框内容
        this.value = value;
        // 将光标位置移到下一个空格
        this.setSelectionRange(cursorPos + 2, cursorPos + 2);
      }
    } else {
      // 如果没有-符号，且输入位置为5，添加-符号
      if (cursorPos === 5) {
        value = `${value.slice(0, cursorPos)}-${value.slice(cursorPos)}`;
        this.value = value;
        this.setSelectionRange(cursorPos + 2, cursorPos + 2);
      }
    }
  }
  // 阻止默认行为，避免输入框中出现其他字符
  event.preventDefault();
});

使用方法

1. 将上面的代码复制到你的Javascript文件中
2. 将输入框的id修改为myInput
3. 测试输入效果

结论

通过监听输入框的keypress事件，我们可以实现输入掩码来限制输入的格式。这里只是一个简单的例子，更多的限制方式可以根据实际需求来实现。