双击编辑文本的核心是监听dblclick事件，替换为input/textarea并聚焦，编辑完成（blur或enter）后更新dom并恢复只读；需避免click干扰、管理焦点、防冒泡、安全处理内容。

双击编辑文本的交互，核心是监听 dblclick 事件，触发后将静态文本替换为可编辑的 <input> 或 <textarea></textarea>，编辑完成（失焦或回车）后再把新内容写回并恢复为只读状态。关键在于避免单击和双击事件冲突、正确管理焦点、以及安全更新 DOM。

监听双击并切换为编辑态

给目标文本容器（如 <span></span> 或 <div>）绑定 <code>dblclick 事件。注意：不要同时监听 click，否则单击可能干扰双击判定（浏览器默认有约 300ms 双击检测窗口，无需手动防抖）。

示例操作：

• 保存原始文本内容和 DOM 节点引用
• 创建一个 <input type="text">，值设为原文本，宽度适配内容（可用 getBoundingClientRect() 或简单设为 width: fit-content）
• 用 replaceWith() 或 innerHTML 替换原节点，插入 input 并自动聚焦

监听编辑完成并保存

编辑结束通常由两个事件触发：失去焦点（blur）或按下 Enter（keydown 判断 event.key === 'Enter'）。两者都应处理，提升可用性。

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

注意事项：

• 在 input 上同时监听 blur 和 keydown，但需确保 Enter 提交后立即 blur() 避免重复触发
• 获取用户输入值前，先 trim() 去除首尾空格，空值可选择保留原内容或清空
• 用原容器节点（或其父级）重新插入新的只读文本节点，例如 textContent = newValue

防止事件冒泡与焦点干扰

如果文本嵌套在可点击区域（如卡片、列表项），双击时可能意外触发外层的 click 处理逻辑。建议：

• 在双击事件处理器中调用 event.stopPropagation()
• input 获取焦点后，点击页面其他地方自然 blur，无需额外阻止；但若页面有全局点击关闭逻辑，需判断点击是否落在当前编辑区内部
• 编辑态时可临时加 class（如 editing），用于 CSS 样式隔离（如禁用 hover 效果）

进阶：支持多行或富文本

若需编辑多行内容，改用 <textarea></textarea> 更合适，注意设置 rows 和 style.height = 'auto' 并监听 input 事件动态调整高度。

如需富文本（加粗、链接等），可改用 contenteditable="true" 的 <div>，但要注意： <ul> <li>提交前需过滤 HTML（防止 XSS），推荐用 <code>textContent 提取纯文本，或使用 DOMPurify 等库净化

blur 或 Enter 后，把 innerHTML 赋给只读容器，并移除 contenteditable

移动端双击行为不稳定，建议补充长按 500ms 模拟双击，或统一用点击“编辑”按钮替代