<textarea>需设name属性确保后端接收，用<meta charset="UTF-8">防中文乱码，换行丢失主因是后端未保留\r\n或\n，限制长度用maxlength（IE10+），自适应高度推荐JS监听input事件并设scrollHeight。
HTML <textarea> 标签怎么写才不被截断或乱码
直接写 <textarea></textarea> 能用，但多数人第一次提交表单就发现：换行没了、中文变问号、内容被截断。根本原因不是浏览器问题，而是没设对 name、rows 和字符编码控制点。
-
name属性必须加，否则后端收不到字段——PHP 的$_POST['xxx']、Python Flask 的request.form.get('xxx')全靠它 -
rows和cols是渲染提示值，不是硬限制；真要限制长度得用maxlength（注意：IE10+ 才支持对<textarea>的maxlength） - 如果页面没声明
<meta charset="UTF-8">，中文输入可能存成乱码，尤其在旧版 Firefox 或某些内网环境
为什么 <textarea> 里的换行在后端变成空格或消失
不是前端丢了换行，是后端没按文本原始格式处理。HTML 中 <textarea> 提交的换行符是 \r\n（Windows）或 \n（macOS/Linux），但很多模板引擎或日志打印会自动折叠空白符。
- PHP 中用
nl2br()显示时转<br>，但存储前别用trim()或str_replace(" ", "", $s)破坏原始换行 - Python 后端接收后，
request.form['content']是原生字符串，直接存 DB 即可；若用 Jinja2 渲染，记得加|safe并确保没开autoescape错误过滤 - 检查是否用了
white-space: nowrap这类 CSS 强制单行显示，它不影响提交值，但会让用户以为“换行没生效”
<textarea> 自适应高度但不滚动的写法靠谱吗
纯 CSS 实现自适应高度不可靠——height: auto + min-height 只能撑开，不能随内容实时缩放；JS 方案更稳，但要注意事件绑定时机和光标位置丢失问题。
- 监听
input事件比keyup更准，能捕获粘贴、拖入、自动填充等所有变更 - 重设
scrollHeight后立即设置height，避免闪动；但 iOS Safari 有渲染延迟，建议加setTimeout(() => { el.style.height = el.scrollHeight + 'px' }, 0) - 别在
focus时强行聚焦或选中内容，否则移动端软键盘弹起后光标偏移，用户得手动点第二次
Vue/React 里双向绑定 <textarea> 为啥回车键失效或状态不同步
框架封装了原生行为，但没完全屏蔽底层细节。常见问题是用 v-model 或 value + onChange 时，没同步处理 onKeyDown 中的 Enter 逻辑，或忘了清空默认提交行为。
立即学习“前端免费学习笔记（深入）”；
- Vue 中
v-model默认监听input，但若同时绑了@keydown.enter.prevent，需确保不冲突；不要在computed setter里改原始值，容易触发无限更新 - React 中用受控组件时，
value必须由 state 驱动，不能混用defaultValue；粘贴大段文本后，onChange触发可能滞后，可用useEffect监听ref.current.value做兜底校验 - SSR 场景下，服务端渲染的初始值和客户端 hydrate 后的值不一致，会导致 React 警告 “Prop `value` changed from X to Y”，务必保证两端初始 state 完全相同
最常被忽略的是：把 <textarea> 放进 <form> 里却没设 type="submit" 按钮，结果回车直接触发表单提交，而不是插入换行——这个行为在 Chrome 和 Safari 下默认开启，关不掉，只能用 event.preventDefault() 拦。
