在文本元素中插入input后缺失后续字符的问题求助

问题根源 #

你的代码里提前执行了x = x.substr(0, c) + x.substr(d, x.length);，这行已经把原始字符串中c到d-1位置的内容删掉了，此时x是被截断后的短字符串。但后续你又用原始的d值作为x.slice(d, z)的起始索引，修改后的x长度比原字符串少了d - c个字符，这就导致截取时跳过了过多内容，最终出现文本缺失。

修正后的代码 #

function myFunction() {
  const originalText = document.getElementById("input").value;
  const targetElement = document.getElementById("inputed");
  
  // 直接基于原始字符串拆分，避免索引混乱
  const leftPart = originalText.slice(0, c);
  const rightPart = originalText.slice(d);
  
  targetElement.innerHTML = `${leftPart}<input type="text" style="color: gray;border:2px solid;border-radius: 10px;outline: none;font-size: x-large;height:40px;width: 100px;" >${rightPart}`;
  console.log(originalText.length);
}

修正说明 #

• 保留原始字符串不做提前修改，确保拆分时的索引c和d始终对应原文本的正确位置。
• 变量名更清晰，避免重复使用x导致的逻辑混淆。
• 直接拼接原始文本的左半段、input元素、原始文本的右半段，保证内容完整。

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