在可编辑div的动态创建span中检测退格键并删除元素

我帮你排查出几个导致退格键检测无效的问题，同时给出可行的解决方案：

问题分析 #

1. 事件绑定目标错误：你把keydown事件绑定在了<span id="var">上，但contenteditable容器的键盘事件更适合绑定在父元素（#input）上——当光标在span内部时，事件会冒泡到父元素，但直接绑定子元素可能无法稳定捕获事件。
2. 代码执行顺序错误：你的alert("backspace detected!");写在了return false;之后，这行代码永远不会被执行，因为return会直接终止函数。
3. 未正确传入事件对象：函数里的event变量没有作为参数传入，虽然部分浏览器会将其作为全局变量，但这不符合标准写法，容易引发问题。

修正后的代码 #

HTML（保持不变） #

<div id="input" contenteditable>
  <span id="var" style="border: 1px solid gray; background-color: yellow;">var:purchase_price</span> I look like an input span
</div>

jQuery代码 #

$(function() {
  // 确保DOM加载完成后执行
  $('#input').on('keydown', function(e) {
    const key = e.keyCode || e.charCode;
    // 检测退格键(8)或删除键(46)
    if (key === 8 || key === 46) {
      const selection = window.getSelection();
      if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        const targetSpan = document.getElementById('var');
        // 判断光标是否在目标span内部
        if (targetSpan.contains(range.commonAncestorContainer)) {
          e.preventDefault(); // 阻止默认的单个字符删除行为
          targetSpan.remove(); // 删除整个span元素
          
          // 可选：将光标定位到span原来的位置，提升体验
          const parent = document.getElementById('input');
          selection.collapse(parent, parent.childNodes.length);
        }
      }
    }
  });
});

代码逻辑说明 #

• 将事件绑定在父元素#input上，确保能稳定捕获所有键盘事件；
• 通过window.getSelection()获取当前光标/选中范围，判断光标是否位于目标span内部；
• 如果触发了退格/删除键且光标在span内，先阻止默认的单个字符删除行为，再移除整个span元素；
• 额外添加了光标定位逻辑，删除span后自动将光标移到原来的位置，优化用户体验。

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