<pre contenteditable>退格失效、换行不保留问题及代码求助

嘿，我来帮你搞定这两个头疼的问题！看你的代码是用XSL循环生成多个pre标签，之前的JS只选中了第一个元素，而且表格内的contenteditable元素确实容易遇到一些小坑，下面分两步给你解决：

一、修复退格键无法使用的问题 #

退格键失效大概率是事件冒泡被父元素（比如表格、外层div）的默认行为干扰了，或者浏览器对表格内的contenteditable元素处理有差异。我们可以给pre标签添加事件监听，确保退格/删除键的默认行为能正常执行：

首先给XSL里的pre加个类名，方便批量处理循环生成的元素：

<pre contenteditable="true" class="editable-pre">
  <xsl:value-of select="$txn_desc"/>
</pre>

然后在JS里添加键盘事件处理：

// 获取所有可编辑的pre标签
const editablePres = document.querySelectorAll(".editable-pre");

editablePres.forEach(pre => {
  // 处理退格/删除键的事件冒泡问题
  pre.addEventListener("keydown", (e) => {
    if (["Backspace", "Delete"].includes(e.key)) {
      // 阻止事件向上冒泡，避免父元素干扰
      e.stopPropagation();
      // 允许默认的删除行为执行
      return true;
    }
  });
});

另外建议给pre加一点基础CSS，优化编辑体验同时避免样式导致的异常：

.editable-pre {
  white-space: pre-wrap; /* 确保换行正常显示 */
  min-height: 60px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

二、保留换行符并存储到变量 #

之前用textContent其实是可以保留换行符的，但如果你的初始内容是XSL生成的，可能换行被压缩了，或者你需要实时监听内容变化来更新变量。我们可以用input事件实时捕获编辑后的内容，确保换行符被完整保留：

// 定义一个数组存储所有编辑后的内容（对应每个循环生成的pre）
let editedContents = [];

editablePres.forEach((pre, index) => {
  // 初始化内容，保留原始换行
  editedContents[index] = pre.textContent;

  // 监听内容变化，实时更新变量
  pre.addEventListener("input", () => {
    // textContent会自动保留用户输入的\n换行符
    editedContents[index] = pre.textContent;
    
    // 如果你需要处理HTML格式的换行（比如<br>标签），可以用下面的转换方式：
    // editedContents[index] = pre.innerHTML.replace(/<br\s*\/?>/gi, '\n');
    
    // 测试查看内容（包括换行）
    console.log("当前编辑内容：", editedContents[index]);
  });
});

这样每次用户编辑内容时，变量editedContents都会实时更新，而且换行符会完整保留下来。

额外提醒 #

• 如果你之前用querySelector("pre")只能获取第一个pre标签，用querySelectorAll才能处理XSL循环生成的所有元素哦！
• textContent和innerText的区别：textContent会保留所有换行和空白，innerText会更贴近页面显示的文本，这里用textContent更适合保留原始输入的换行。

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