如何实现包含固定不可修改锁定字符的input输入框？

你可以给可编辑的输入框添加按键监听逻辑，实现输入后自动跳转、回删自动回退的效果，完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>固定格式输入</title>
  <style>
    input {
      width: 16px;
      text-align: center;
      margin: 0 2px;
    }
    input:disabled {
      background: #f0f0f0;
      border: none;
    }
  </style>
</head>
<body>
  <input class="editable" maxlength="1">
  <input class="editable" maxlength="1">
  <input value="l" disabled>
  <input value="l" disabled>
  <input value="o" disabled>
  <span style="display: inline-block;width: 12px;"></span>
  <input value="w" disabled>
  <input class="editable" maxlength="1">
  <input value="r" disabled>
  <input value="l" disabled>
  <input value="d" disabled>
  <input value="!" disabled>

  <script>
    const editables = Array.from(document.querySelectorAll('.editable'))
    editables.forEach((input, index) => {
      // 输入内容后自动跳转到下一个输入框
      input.addEventListener('input', () => {
        if (input.value.length === 1 && index < editables.length - 1) {
          editables[index + 1].focus()
        }
      })
      // 按退格键且当前无内容时跳转到上一个输入框
      input.addEventListener('keydown', (e) => {
        if (e.key === 'Backspace' && input.value === '' && index > 0) {
          editables[index - 1].focus()
        }
      })
    })
    // 默认聚焦第一个输入框
    editables[0].focus()
  </script>
</body>
</html>

该方案逻辑简单，固定字符和可输入区域边界清晰，不会出现误修改的情况。

如果不想用多个输入框，也可以用单个输入框实现，通过监听输入事件拦截非允许位置的修改操作，代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>固定格式输入</title>
</head>
<body>
  <input id="maskInput" style="font-family: monospace;" maxlength="11">
  <script>
    // 预设模板，_表示可编辑位置
    const template = '__llo w_rld!'
    const input = document.getElementById('maskInput')
    // 初始化输入框值为模板替换下划线为空格
    input.value = template.replaceAll('_', ' ')

    input.addEventListener('beforeinput', (e) => {
      e.preventDefault()
      const pos = input.selectionStart
      // 仅允许修改模板为_的位置
      if (template[pos] !== '_') return
      
      if (e.inputType === 'insertText' && e.data) {
        // 插入字符
        const arr = input.value.split('')
        arr[pos] = e.data
        input.value = arr.join('')
        // 光标移到下一个可编辑位置
        let nextPos = pos + 1
        while (nextPos < template.length && template[nextPos] !== '_') nextPos++
        if (nextPos < template.length) input.setSelectionRange(nextPos, nextPos)
      } else if (e.inputType === 'deleteContentBackward') {
        // 回删字符
        const arr = input.value.split('')
        arr[pos] = ' '
        input.value = arr.join('')
        // 光标移到上一个可编辑位置
        let prevPos = pos - 1
        while (prevPos >= 0 && template[prevPos] !== '_') prevPos--
        if (prevPos >= 0) input.setSelectionRange(prevPos, prevPos)
      }
    })
    // 光标点击非编辑位置时自动跳到最近的可编辑位置
    input.addEventListener('click', () => {
      const pos = input.selectionStart
      if (template[pos] === '_') return
      // 找最近的可编辑位置
      let nearest = pos
      while (nearest < template.length && template[nearest] !== '_') nearest++
      if (nearest >= template.length) {
        nearest = pos
        while (nearest >= 0 && template[nearest] !== '_') nearest--
      }
      input.setSelectionRange(nearest, nearest)
    })
  </script>
</body>
</html>

该方案用户可以像普通输入框一样连续输入，不需要在多个输入框之间跳转，体验更流畅。

内容的提问来源于stack exchange，提问作者itasahobby