HTML全局属性contenteditable实现自适应高度多行文本输入框-html教程-PHP中文网

可行但需补全断点：无提交机制、无value属性、不触发change事件、placeholder须手动模拟，移动端光标与软键盘行为不稳定；scrollHeight是唯一可靠高度计算方式，因它返回含padding的完整渲染高度，不受字体加载、缩放及行高抖动影响。

html全局属性contenteditable实现自适应高度多行文本输入框

直接用 contenteditable 实现自适应高度多行输入框，可行，但不能当 textarea 使——它不提交、没 value、不触发 change、placeholder 需手动模拟，移动端光标和软键盘行为也不稳定。想省事就别选它；真要用，就得补全这些断点。

为什么 scrollHeight 是唯一靠谱的高度计算方式

scrollHeight 返回元素内容实际渲染后的完整高度（含 padding），不受字体加载延迟、缩放、行高抖动影响。而 offsetHeight 包含 border，clientHeight 忽略溢出，硬算行数在中文换行、emoji、富文本片段下必然错。

必须先设 element.style.height = 'auto' 再赋值 scrollHeight，否则浏览器缓存旧高度
Safari 在空内容时 scrollHeight 常返回 0 或极小值，建议兜底：空时设 min-height 或强制 height: 1.2em
快速连续输入或粘贴大段文本时，直接赋值会抖动，用 requestAnimationFrame 包一层更稳

contenteditable="plaintext-only" vs true 的实际差异

contenteditable="true" 允许粘贴 HTML（比如带样式的微信消息），plaintext-only 会自动 strip 标签、保留纯文本。但注意：plaintext-only 在部分 Android WebView 和旧版 Safari 中不被支持，降级后行为不可控。

PC 端推荐用 plaintext-only，语义明确、风险低
移动端兼容性差，建议 fallback 到 true + 监听 input 事件后手动 textContent 过滤
别依赖 CSS 的 -webkit-user-modify: read-write-plaintext-only，它只在 WebKit 有效，且已被标记为非标准

placeholder 模拟必须绕开 :empty 和 :not(:empty)

:empty:before 在有空白字符（如、换行符）时失效；:not(:empty) 在 iOS Safari 中对 contenteditable 元素支持极差，会导致 placeholder 闪现或不消失。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

正确做法：监听 input 事件，用 element.textContent.trim() === '' 判断是否为空
用 class 控制显示隐藏（如 .has-content），避免伪元素依赖 DOM 状态
初始聚焦时，placeholder 要立即隐藏；blur 后若仍为空，再显示——这点常被忽略，导致失焦瞬间 placeholder 闪一下

表单提交前必须手动提取和同步内容

contenteditable 元素不会出现在 form.elements 里，也不会被 FormData.append() 自动收集。submit 时若不处理，字段直接丢失。

提交前取值统一用 element.textContent（不是 innerText，后者会触发重排）
如果用了隐藏同步值，记得每次 input 事件后更新其 value，否则 form.reset() 会清掉 hidden input 却不清 contenteditable
移动端 iOS 上，有时 input 事件漏发（尤其快速删除或粘贴），建议加 blur 事件兜底校验

真正麻烦的从来不是“怎么让高度变高”，而是光标位置、软键盘收起时机、粘贴过滤、空格/换行判定、form reset 同步——这些点没压住，上线后就会在某个机型上突然崩掉。