如何修改输入框值时避免光标跳至末尾？求更优JS方案

问题背景 #

原始代码可实现每5个字符添加空格的格式，但在非末尾位置进行输入或删除操作时，光标会自动跳至输入框末尾；后续自行修复了光标跳转问题，却又无法支持多字符复制粘贴操作，现寻求更健壮、简洁的实现方案。

原始问题代码 #

let Input = document.createElement("input"); 
Input.setAttribute("type", "text");
Input.style.width = "100%";
Input.style.height = "30px";
Input.style.fontSize = "20px";

// 需要修改的代码开始
Input.addEventListener("input", () => {
    Input.value = Input.value.replace(/\s*/g,"");
    Input.value = Input.value.replace(/(.{5})/g, '$1 ');
    Input.value = Input.value.trim();
});
// 需要修改的代码结束

document.body.appendChild(Input);

问题现象 #

在输入框末尾输入或删除内容时表现正常，但在非末尾位置操作时，光标会自动跳至末尾。例如输入框内容为ABCDE FGHJK时，删除字符A后光标会直接跳到文本最后。

光标行为要求（示例） #

自行修复过程 #

第一次修复（解决光标跳转，但不支持多字符粘贴） #

let Input = document.createElement("input");
Input.setAttribute("type", "text");
Input.style.width = "100%";
Input.style.height = "30px";
Input.style.fontSize = "20px";
Input.addEventListener("input", () => {
  const cursorPosition = Input.selectionStart;
  const imValue = Input.value;
  Input.value = Input.value.replace(/\s*/g,"").replace(/(.{5})/g, '$1 ').trim();
  const lenDiff = Input.value.length - imValue.length;
  if(cursorPosition == imValue.length) {
      Input.setSelectionRange(Input.value.length, Input.value.length);
      return ;
  }
  if(imValue[cursorPosition] === " " && Input.value[cursorPosition - 1] === " ") {
      Input.setSelectionRange(cursorPosition + 1, cursorPosition + 1);
      return ;
  }
  if(imValue[cursorPosition - 1] === " ") {
      Input.setSelectionRange(cursorPosition - 1, cursorPosition - 1);
      return ;
  }
  Input.setSelectionRange(cursorPosition, cursorPosition);
});
document.body.appendChild(Input);

存在问题：仅支持单字符输入，无法处理多字符字符串的复制粘贴操作。

第二次修复（通过beforeinput处理多字符粘贴） #

let Input = document.createElement("input");
Input.setAttribute("type", "text");
Input.style.width = "100%";
Input.style.height = "30px";
Input.style.fontSize = "20px";
Input.addEventListener("beforeinput", e => {
  if(e.data) {
    e.preventDefault();
    const data = e.data.replace(/\s*/g,"");
    for(let i = 0; i < data.length; i++) {
      let cursorPosition = Input.selectionStart;
      Input.value = Input.value.slice(0, cursorPosition) + data[i] + Input.value.slice(cursorPosition);
      Input.setSelectionRange(cursorPosition + 1, cursorPosition + 1);
      Input.dispatchEvent(new Event("input"));
    }
  }
});
Input.addEventListener("input", () => {
  const cursorPosition = Input.selectionStart;
  const imValue = Input.value;
  Input.value = Input.value.replace(/\s*/g,"").replace(/(.{5})/g, '$1 ').trim();
  const lenDiff = Input.value.length - imValue.length;
  if(cursorPosition == imValue.length) {
      Input.setSelectionRange(Input.value.length, Input.value.length);
      return ;
  }
  if(imValue[cursorPosition] === " " && Input.value[cursorPosition - 1] === " ") {
      Input.setSelectionRange(cursorPosition + 1, cursorPosition + 1);
      return ;
  }
  if(imValue[cursorPosition - 1] === " ") {
      Input.setSelectionRange(cursorPosition - 1, cursorPosition - 1);
      return ;
  }
  Input.setSelectionRange(cursorPosition, cursorPosition);
});
document.body.appendChild(Input);

更健壮简洁的实现方案 #

核心逻辑：

1. 记录光标在无空格纯文本中的位置，避免空格干扰位置计算
2. 格式化文本后，将纯文本光标位置转换为带空格的新位置
3. 直接支持多字符输入/粘贴，无需拆分单字符处理

const input = document.createElement("input");
input.type = "text";
input.style.width = "100%";
input.style.height = "30px";
input.style.fontSize = "20px";

input.addEventListener("input", () => {
    // 获取原始光标位置和输入值
    const originalPos = input.selectionStart;
    const originalValue = input.value;
    
    // 提取无空格的纯文本
    const plainText = originalValue.replace(/\s/g, "");
    // 计算光标在纯文本中的对应位置
    const plainCursorPos = [...originalValue.slice(0, originalPos)].filter(c => c !== " ").length;
    
    // 格式化纯文本为每5字符加空格的格式
    const formattedText = plainText.replace(/(.{5})/g, "$1 ").trim();
    
    // 转换纯文本光标位置为格式化后的光标位置
    let newCursorPos = 0;
    let plainCharCount = 0;
    while (newCursorPos < formattedText.length && plainCharCount < plainCursorPos) {
        if (formattedText[newCursorPos] !== " ") plainCharCount++;
        newCursorPos++;
    }
    
    // 处理删除操作后可能的空格偏移问题
    if (originalValue.length > formattedText.length && formattedText[newCursorPos - 1] === " " && plainCharCount === plainCursorPos) {
        newCursorPos--;
    }
    
    // 设置最终的文本和光标位置
    input.value = formattedText;
    input.setSelectionRange(newCursorPos, newCursorPos);
});

document.body.appendChild(input);

方案优势 #

• 无需拆分多字符输入，直接兼容复制粘贴、批量输入等场景
• 光标位置计算基于纯文本，逻辑清晰，避免复杂的条件判断
• 代码结构简洁，减少冗余逻辑
• 适配所有操作场景：任意位置的输入、删除、修改

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