按钮不应加contenteditable="true"，因其破坏原生行为、引发安全风险；应禁用编辑权限并用MutationObserver监听还原，配合服务端白名单校验。
直接给按钮加 contenteditable="true" 是危险且不可控的——它会让按钮文本变成富文本编辑区，用户能删、能粘贴 HTML、能插入 script 标签，甚至破坏按钮结构。真要防篡改，得从“不让它可编辑”和“万一被改了立刻拉回来”两头堵。
为什么 button 元素不该加 contenteditable
浏览器对 <button> 的 DOM 结构有强约束：contenteditable 在 button 内部会干扰原生行为，比如：
- Chrome/Firefox 里点击按钮后光标可能卡死，无法删除末尾字符
- 粘贴带
<script>的内容时，innerHTML赋值可能触发执行（尤其在旧版 Safari） - 回车键会插入
<div>或<p>，破坏按钮语义，导致点击失效 -
textContent和innerHTML不同步，JS 判断按钮状态时容易出错
用 MutationObserver 监控并自动还原按钮文本
真正可靠的做法不是靠属性锁死，而是监听 DOM 变化，发现文本被改就秒级还原。重点不是“阻止”，而是“兜底”。
- 监听目标必须是具体按钮节点，例如
document.querySelector('#pay-btn')，不能监听整个body - 配置只开
childList: true和subtree: true，避免监听 class/style 等无关变更 - 回调里先过滤：跳过文本节点（
node.nodeType !== Node.ELEMENT_NODE）、跳过非按钮元素、跳过自身修复操作触发的二次变更 - 还原逻辑用
el.textContent = originalText，别用innerHTML—— 避免二次注入 - 修复前调用
observer.disconnect()，修复完再observe()，防止死循环
禁用编辑权限比监听更前置有效
多数场景根本不需要按钮可编辑。与其事后清洗，不如一开始就不让它有机会被改。
立即学习“前端免费学习笔记（深入）”；
- 移除所有
contenteditable属性，包括父容器（contenteditable="false"会继承封锁子元素） - 加 CSS 锁定：
button { user-select: none; pointer-events: none; }（注意：后者会禁用点击，慎用） - 若需临时编辑（如后台管理界面），用 JS 动态开关：
btn.contentEditable = 'true'+btn.tabIndex = '0'，编辑完立刻设回'false'并清除tabIndex - 禁止右键菜单：监听
contextmenu事件并preventDefault()，防用户通过“检查元素”篡改
按钮文本被改后如何安全取值
即使加了防护，前端永远不能信任 DOM 当前状态。提交前必须做最后校验。
- 取值优先用
btn.textContent，它天然剥离所有标签和脚本 - 绝对不要用
btn.innerHTML做判断或提交——哪怕你刚做过清洗，DOMPurify 也可能漏掉<img onerror=alert(1)> - 服务端必须重验按钮文案是否在白名单内（例如只允许 “立即支付”、“确认下单”、“取消”），不能只校验长度或字符集
- 如果按钮文案来自接口，应在渲染时打 hash 标记（如
data-hash="sha256:abc123"），MutationObserver 发现不匹配就报警而非静默还原
最易被忽略的一点：按钮常嵌在表单里，而表单 submit 事件不会触发 input 或 blur，所以靠事件监听来捕获篡改根本不可靠。唯一能托底的，是 MutationObserver + 服务端白名单双重校验——前者管住浏览器端，后者守住最终防线。
