本文详解如何解决移动端 contentEditable 元素中 Backspace 键无法正常删除自定义 <span> 标签的问题，重点替换过时的 keydown + event.key 判断逻辑，改用标准 input 事件与 inputType 属性实现跨平台兼容的删除检测。
本文详解如何解决移动端 contenteditable 元素中 backspace 键无法正常删除自定义 `` 标签的问题，重点替换过时的 `keydown` + `event.key` 判断逻辑，改用标准 `input` 事件与 `inputtype` 属性实现跨平台兼容的删除检测。
在构建富文本编辑类应用（如支持自动补全的笔记工具）时，依赖 contentEditable="true" 实现内联编辑是常见做法。但一个高频痛点是：移动端浏览器（尤其是 iOS Safari 和 Android Chrome）对 Backspace 键的事件触发机制与桌面端存在根本性差异——它往往不触发 keydown/keyup 事件，或触发时机错乱、event.key 值不可靠（例如返回 Unidentified），导致基于 event.key === 'Backspace' 的逻辑完全失效。
你原代码的核心问题在于：
- ❌ 混用原生 addEventListener('keyup') 与 jQuery .on('keydown')，易引发事件监听冲突；
- ❌ 依赖 event.key 判断删除操作，在移动端不可靠；
- ❌ 使用 previousSibling 遍历时未做空值防护（previousTag 可能为 null），导致脚本崩溃；
- ❌ deletionMarker 插入后立即查询 document.querySelector('#deletionMarker')，在异步渲染场景下可能查不到（尤其移动端 DOM 更新延迟更高）。
✅ 正确解法是转向 语义化、标准化的 input 事件，并利用其 event.inputType 属性精准识别用户意图：
function createAdditionalDiv() {
const innerBox = document.createElement('div');
innerBox.contentEditable = "true";
innerBox.id = `box_${totalBoxes++}`;
innerBox.className = "mainBox";
const mainBox = document.getElementById('mainContainer');
mainBox.appendChild(innerBox);
// ✅ 统一使用原生事件，避免 jQuery 与原生混用
innerBox.addEventListener('input', function (e) {
// ✅ 精准捕获“向后删除”行为（Backspace 或长按删除）
if (e.inputType === 'deleteContentBackward') {
// 创建临时标记节点（用于定位光标前元素）
const marker = document.createElement('span');
marker.hidden = true;
marker.id = 'deletionMarker';
// 将 marker 插入当前光标位置（需确保 putDataToCarentPos 已适配）
putDataToCarentPos(marker.outerHTML, false);
// ✅ 安全获取前一个非空兄弟节点（防御 null）
let prev = marker.previousSibling;
while (prev && (!prev.textContent?.trim() || prev.nodeType !== Node.ELEMENT_NODE)) {
prev = prev.previousSibling;
}
// ✅ 清理 marker（必须在 DOM 查询后立即执行，避免干扰）
marker.remove();
// 执行删除逻辑
if (prev && prev.tagName === 'SPAN' && prev.classList.contains('toDelete')) {
// 第二次 Backspace：彻底移除已标记元素
prev.remove();
} else if (prev && prev.tagName === 'SPAN') {
// 第一次 Backspace：标记为待删除
prev.classList.add('toDelete');
e.preventDefault(); // 阻止默认字符删除，仅标记
}
}
});
}? 关键改进说明：
- 事件选型：input 事件在所有现代移动端浏览器中稳定触发，且 e.inputType 提供语义化操作类型（deleteContentBackward / deleteContentForward / insertText 等），比 key 值更可靠；
- DOM 安全操作：添加 prev && 空值检查，避免 Cannot read property 'tagName' of null 报错；
- 标记清理前置：marker.remove() 移至节点查询之后、逻辑判断之前，确保 DOM 状态纯净；
- 移除 jQuery 依赖：统一用原生 addEventListener，消除事件委托冲突风险；
- 类名操作优化：使用 classList.contains() 和 classList.add() 替代字符串匹配，更健壮。
⚠️ 额外注意事项：
- putDataToCarentPos() 函数必须确保将 marker 插入到当前光标位置（而非末尾），否则 previousSibling 查询会失败。建议使用 window.getSelection() + Range API 实现精确插入；
- iOS Safari 对 contentEditable 的光标定位有特殊限制，若发现 marker 插入位置异常，需在插入后调用 innerBox.focus() 并手动恢复光标；
- 测试务必覆盖真机环境：Chrome DevTools 的模拟器 ≠ 真实移动端行为，推荐使用 Chrome Remote Debugging 连接安卓设备，或使用 Safari Web Inspector 调试 iOS。
通过以上重构，你的“双击 Backspace 删除组件”功能将在 iOS、Android 各主流浏览器中一致生效，彻底告别模拟器能跑、真机失灵的尴尬局面。
