
用 <textarea></textarea> 定义多行文本框
HTML 里唯一原生支持多行输入的表单控件就是 <textarea></textarea>,不是 <input type="text">,也不是 div + contenteditable —— 后两者都不算语义化、不可访问、提交行为不可靠。
它默认可换行、可滚动、可调整大小,且天然支持表单序列化(submit 时自动带值)。
-
name属性必须加,否则提交时这个字段不会出现在表单数据里 - 不要用
value设置初始内容,应该把文本写在<textarea>内容</textarea>标签体内 - 如果服务端返回带换行的字符串(比如 \n),直接插进标签体即可,浏览器会正确渲染为多行
rows 和 cols 不是像素,别当 CSS 用
这两个属性控制的是「可见行数」和「平均字符宽度」,不是高度/宽度像素值,也不响应 rem/em。它们只是渲染提示,实际尺寸仍受 CSS 影响,且用户可以拖拽调整大小(除非禁用)。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件(幻灯片风格)。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本,并且希望生成演示用的 HTML 时触发。支持任意内容来源:iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区,并通过企微直接发送给用户。触发词示例:帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 设
rows="5"表示大概显示 5 行文字,但字体、行高、padding 都会影响真实高度 -
cols="40"指“约等于 40 个英文字符宽”,中文通常按 1:2 或 1:1 算,不精确 - 真正做响应式布局时,优先用
width/min-height等 CSS 控制,rows只作兜底或辅助可读性
禁止用 resize: none 就以为用户不能拉伸了
很多开发者加了 style="resize: none;" 就以为搞定了,但其实 Safari 下仍可能通过双指缩放触发意外拉伸,而且键盘快捷键(如 macOS 的 ⌘+鼠标拖拽)也可能绕过样式限制。
立即学习“前端免费学习笔记(深入)”;
- 更稳妥的做法是同时加
resize: none;和max-width: 100%; max-height: 300px;等硬性约束 - 如果业务强要求固定尺寸,建议再加
overflow: auto;,避免内容被裁切又无法滚动 - 移动端尤其要注意:iOS Safari 对
textarea的 focus 行为有特殊处理,拉伸逻辑可能被系统键盘弹出打断
换行符在提交时可能变成 \r\n,后端得兼容
用户在 <textarea></textarea> 里按 Enter 输入的换行,在不同系统下底层可能是 \n(macOS/Linux)或 \r\n(Windows),而多数浏览器提交表单时统一转成 \r\n —— 这不是 bug,是规范行为。
- Node.js 的
body-parser默认保留原始换行符,但 Python Flask 的request.form有时会标准化为\n - 如果要做行数统计、富文本转换或 Markdown 渲染,别直接
split('\n'),先统一 normalize:text.replace(/\r\n/g, '\n').replace(/\r/g, '\n') - 数据库存储前也建议归一化,否则搜索“第2行”可能因换行符差异匹配失败


















