如何实现点击span元素后允许用户修改其textContent？

你的代码核心问题是把targetSpanText赋值成了span的文本字符串，而非span元素本身。字符串是值类型，没有textContent属性，所以你后续的赋值操作完全不会影响到DOM里的span元素。

修正后的代码 #

let currentEditingSpan = null; // 保存当前正在编辑的span元素

container.addEventListener('click', (event) => {
  // 只处理带有targetSpan类的span元素
  if (event.target.classList.contains('targetSpan')) {
    // 移除之前的keydown监听，避免重复绑定
    document.removeEventListener('keydown', handleKeyDown);
    // 保存当前编辑的span元素
    currentEditingSpan = event.target;
    // 绑定keydown事件
    document.addEventListener('keydown', handleKeyDown);
  } else {
    // 点击其他地方，结束编辑
    document.removeEventListener('keydown', handleKeyDown);
    currentEditingSpan = null;
  }
});

function handleKeyDown(event) {
  if (!currentEditingSpan) return;

  // 处理退格键：删除最后一个字符
  if (event.key === 'Backspace') {
    currentEditingSpan.textContent = currentEditingSpan.textContent.slice(0, -1);
    event.preventDefault(); // 阻止默认退格行为（比如页面后退）
    return;
  }

  // 忽略功能键（Shift、Ctrl、Alt等），只处理可打印字符
  if (event.key.length === 1 && !event.ctrlKey && !event.altKey) {
    currentEditingSpan.textContent += event.key;
    event.preventDefault(); // 阻止默认按键行为（比如输入到其他输入框）
  }
}

关键改进点 #

• 用currentEditingSpan保存当前编辑的DOM元素，而非文本字符串，确保修改的是真实的span元素
• 每次开始编辑前移除之前的keydown监听，避免多次点击后重复触发事件
• 添加退格键处理，让编辑更符合预期
• 忽略功能键，只处理可打印字符，避免意外输入
• 点击非目标span时结束编辑，移除监听

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