如何用纯JavaScript实现输入框键入时自动添加不可删除的固定前后缀

核心逻辑 #

• 预定义固定前后缀，限制光标仅可在前后缀之间的区域移动、编辑
• 拦截删除、选中操作，禁止修改前后缀内容
• 实时校验输入内容，仅保留前后缀时自动清空输入框
• 无需额外表单校验弹窗，前后缀直接显示在输入框内

完整实现代码 #

HTML部分 #

<!-- 用户名输入框 -->
<input type="text" id="usernameInput" placeholder="请设置用户名">

JavaScript部分 #

const usernameInput = document.getElementById('usernameInput');
// 可自定义固定前后缀
const FIXED_PREFIX = '用户_';
const FIXED_SUFFIX = '_官方';
const FIXED_TOTAL_LENGTH = FIXED_PREFIX.length + FIXED_SUFFIX.length;

// 重置输入框为空
const resetEmpty = () => {
  usernameInput.value = '';
};

// 拼接完整输入内容并定位光标
const setInputContent = (userContent) => {
  usernameInput.value = `${FIXED_PREFIX}${userContent}${FIXED_SUFFIX}`;
  // 光标自动定位到用户输入内容的末尾
  const cursorPos = FIXED_PREFIX.length + userContent.length;
  usernameInput.setSelectionRange(cursorPos, cursorPos);
};

// 聚焦时强制光标落在可编辑区域
usernameInput.addEventListener('focus', () => {
  const valLength = usernameInput.value.length;
  if (valLength === 0) return;
  const cursorPos = valLength - FIXED_SUFFIX.length;
  usernameInput.setSelectionRange(cursorPos, cursorPos);
});

// 拦截按键操作，禁止修改前后缀
usernameInput.addEventListener('keydown', (e) => {
  const selectStart = usernameInput.selectionStart;
  const selectEnd = usernameInput.selectionEnd;
  const valLength = usernameInput.value.length;
  const editableEndPos = valLength - FIXED_SUFFIX.length;

  // 处理全选操作：仅选中中间可编辑部分
  if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
    e.preventDefault();
    usernameInput.setSelectionRange(FIXED_PREFIX.length, editableEndPos);
    return;
  }

  // 禁止删除前后缀
  if (
    (e.key === 'Backspace' && selectStart <= FIXED_PREFIX.length) ||
    (e.key === 'Delete' && selectEnd >= editableEndPos)
  ) {
    e.preventDefault();
    return;
  }

  // 禁止光标移动到前后缀区域
  if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) {
    setTimeout(() => {
      const newSelectStart = usernameInput.selectionStart;
      const newSelectEnd = usernameInput.selectionEnd;
      const adjustStart = Math.max(FIXED_PREFIX.length, newSelectStart);
      const adjustEnd = Math.min(editableEndPos, newSelectEnd);
      usernameInput.setSelectionRange(adjustStart, adjustEnd);
    }, 0);
  }
});

// 实时校验输入内容合法性
usernameInput.addEventListener('input', () => {
  const currentVal = usernameInput.value;
  if (currentVal.length === 0) return;

  // 校验前后缀是否完整
  const hasValidPrefix = currentVal.startsWith(FIXED_PREFIX);
  const hasValidSuffix = currentVal.endsWith(FIXED_SUFFIX);

  if (!hasValidPrefix || !hasValidSuffix) {
    // 提取用户实际输入的内容
    let userContent = currentVal;
    if (userContent.startsWith(FIXED_PREFIX)) userContent = userContent.slice(FIXED_PREFIX.length);
    if (userContent.endsWith(FIXED_SUFFIX)) userContent = userContent.slice(0, -FIXED_SUFFIX.length);
    
    // 无实际内容则清空输入框
    if (userContent.trim().length === 0) {
      resetEmpty();
      return;
    }
    setInputContent(userContent);
    return;
  }

  // 仅剩下前后缀时清空输入框
  if (currentVal.length === FIXED_TOTAL_LENGTH) {
    resetEmpty();
    return;
  }
});

// 提交时直接取value即可得到完整用户名
const getFinalUsername = () => usernameInput.value;

使用说明 #

• 自行修改FIXED_PREFIX和FIXED_SUFFIX的值即可设置你需要的固定前后缀
• 所有编辑操作都会自动保留前后缀，用户无法删除或修改前后缀内容
• 用户删除全部自定义内容后，输入框会自动清空，不会残留前后缀
• 提交表单时直接读取输入框的value属性即可得到完整的带前后缀的用户名，无需额外拼接

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