如何用JavaScript实现HTML输入框带不可编辑默认前缀且可追加内容？

完全可以通过JavaScript实现这个需求，核心思路是监听输入框的各类操作事件，强制保留前缀内容不被修改，同时限制后续输入为数字。下面是具体的实现方案：

代码实现 #

HTML结构 #

先创建一个输入框，默认填充好不可编辑的前缀：

<input type="text" id="prefixedInput" value="AB" maxlength="10">

JavaScript逻辑 #

通过监听输入框的keydown、input、paste事件，实现前缀保护和输入限制：

const input = document.getElementById('prefixedInput');
const prefix = 'AB';
const prefixLength = prefix.length;

// 阻止在前缀区域执行修改操作
input.addEventListener('keydown', (e) => {
  if (input.selectionStart < prefixLength) {
    // 禁止删除、退格等修改前缀的按键，允许左右方向键移动光标
    const forbiddenModifyKeys = ['Backspace', 'Delete'];
    if (forbiddenModifyKeys.includes(e.key)) {
      e.preventDefault();
    }
    // 光标不能移到前缀之前
    if (e.key === 'ArrowLeft' && input.selectionStart === 0) {
      e.preventDefault();
    }
  }
});

// 实时校验输入内容，确保前缀不被篡改
input.addEventListener('input', () => {
  if (!input.value.startsWith(prefix)) {
    // 提取输入中的数字部分，拼接前缀重置内容
    const numericPart = input.value.replace(/[^0-9]/g, '');
    input.value = prefix + numericPart;
  } else {
    // 过滤前缀后的非数字内容
    const validSuffix = input.value.slice(prefixLength).replace(/[^0-9]/g, '');
    input.value = prefix + validSuffix;
  }
  // 自动将光标定位到内容末尾（可选，也可保留用户光标位置）
  input.setSelectionRange(input.value.length, input.value.length);
});

// 处理粘贴操作，只允许粘贴数字到前缀后面
input.addEventListener('paste', (e) => {
  e.preventDefault();
  const pastedContent = e.clipboardData.getData('text');
  const numericContent = pastedContent.replace(/[^0-9]/g, '');
  input.value = prefix + input.value.slice(prefixLength) + numericContent;
  input.setSelectionRange(input.value.length, input.value.length);
});

关键说明 #

• 前缀保护：通过keydown事件拦截可能修改前缀的操作，同时限制光标范围，避免误删前缀。
• 输入过滤：input事件实时校验内容，确保前缀始终保留，且后续仅允许输入数字。
• 粘贴处理：拦截原生粘贴行为，过滤非数字内容后再添加到输入框，避免无效内容混入。

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