contenteditable 元素不支持 maxlength，因其仅适用于 input 和 textarea；需通过监听 input 和 compositionend 事件实时截断，优先用 textcontent 计数，用 inserttext 或 range 操作安全插入，并拦截 paste 事件做同步剪裁。
contenteditable 元素为什么不能用 maxlength
因为 maxlength 是表单控件专属属性，只对 <input> 和 <textarea></textarea> 生效；contenteditable="true" 的 <div> 或其他元素压根不识别它——加了也等于没加，浏览器直接忽略。<h3>用 input + compositionend 事件做实时字数截断</h3>
<p>仅监听 <code>input 事件不够，中文输入法在拼音上屏（比如“你好”从“ni hao”转成汉字）时，input 会先触发一次未完成内容，compositionend 才是最终结果。漏掉后者，就会出现“明明限制 100 字，却输进 102 个汉字”的情况。
- 必须同时监听
input和compositionend，并在两个回调里都执行截断逻辑 - 截断时优先用
el.textContent计数，它剥离 HTML 标签，最接近用户“看到的字数” - 截断后不能直接赋值
el.innerHTML = truncatedText，否则光标跳到开头、样式丢失、甚至破坏富文本结构；推荐用document.execCommand('insertText', false, truncatedText)（兼容性好）或更现代的Range操作 - iOS Safari 中
input在粘贴后可能触发两次，建议加setTimeout(() => { /* 截断 */ }, 0)去重
粘贴超长内容时怎么安全剪裁
用户 Ctrl+V 粘贴一段 2000 字文本，当前已有 4800 字，直接塞进去就爆限。但不能等粘贴完再删——那样会短暂超限，且可能触发意外渲染或脚本执行。
- 必须拦截
paste事件，调用event.preventDefault() - 用
event.clipboardData.getData('text/plain')获取纯文本（避免 HTML 注入和样式污染） - 计算剩余字数：
const remaining = limit - el.textContent.length，然后取plainText.slice(0, remaining) - 插入前检查是否为空，空字符串会导致光标异常，可补一个零宽空格
\u200B占位 - 别依赖
document.execCommand('insertHTML')，它不校验、不截断、易 XSS；改用insertText或手动构建Text节点插入
选中替换和删除场景下的边界处理
用户选中 500 字后粘贴新内容，或全选后按 Backspace，这些操作不会触发 input，但会改变长度。如果只靠输入事件监听，就会漏判。
- 选中状态下粘贴：需在
paste处理逻辑里先读取当前选区，用getSelection().toString().length计算被替换长度 - 删除操作（Backspace/Delete）：虽会触发
input，但若删的是 HTML 节点（如图片、链接），textContent可能不变，得配合MutationObserver监听childList变更 - compositionstart 之后的输入尚未上屏，此时不应计入字数；真正计数时机是
compositionend触发后 - 移动端软键盘回车是
\n，占 1 字符，和 PC 一致；但部分 IME 可能插入\r\n，需统一 normalize 换行符再计数
实际写的时候，最容易被忽略的是中文输入法的三阶段事件顺序和粘贴时的同步截断——不是“输完再拦”，而是“还没落进 DOM 就掐住”。否则用户会看到文字一闪而过又消失，体验断裂。
