
textarea 标签用于在 HTML 页面中创建一个多行文本输入框,允许用户输入和编辑大段文本。它比 input 标签的 type="text" 更适合处理需要换行和较长篇幅的文本内容。

textarea 标签允许用户在网页上输入和编辑多行文本,例如评论、留言、描述等。
textarea 的常见属性及用法

textarea 标签有一些常用的属性,可以控制其行为和外观:
立即学习“前端免费学习笔记(深入)”;
- name: 定义 textarea 的名称,用于在表单提交时传递数据。这很重要,没有 name 属性,服务器将无法接收到 textarea 中的内容。
- rows: 指定 textarea 的可见行数。注意,这只是一个提示,用户仍然可以输入超过这个行数的文本,只是需要滚动才能看到。
- cols: 指定 textarea 的可见列数,即文本区域的宽度。同样,这只是一个提示,文本区域的实际宽度可能受到 CSS 样式的进一步影响。
- placeholder: 提供一个占位符文本,当 textarea 为空时显示,提示用户应该输入什么内容。
- disabled: 禁用 textarea,使其无法编辑。
- readonly: 将 textarea 设置为只读,用户可以查看但不能修改其中的内容。
- maxlength: 限制 textarea 中允许输入的最大字符数。
- required: 指定 textarea 为必填项,在表单提交前必须填写。
一个简单的例子:

这段代码创建了一个名为 "comment" 的 textarea,显示 4 行,宽度为 50 列,包含一个占位符文本,并且是必填项。
textarea 的内容可以通过 JavaScript 来获取和设置。例如:
const textarea = document.querySelector('textarea[name="comment"]');
const commentText = textarea.value; // 获取 textarea 的内容
textarea.value = "新的评论内容"; // 设置 textarea 的内容textarea 内容提交到服务器后如何处理?
当包含 textarea 的表单被提交时,textarea 中的文本内容会作为请求体的一部分发送到服务器。服务器端(例如使用 PHP、Python、Node.js 等)需要相应的代码来接收和处理这些数据。
传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目,如果修改栏目,需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML,安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据,安装时可选择演示安装或全新安装。如果全新安装,后台内容充实后,首页才能完全显示出来。(全新安装后可以删除演示数据用到的图片,目录在https://
例如,如果使用 PHP,可以通过 $_POST['comment'] 来获取名为 "comment" 的 textarea 中的内容。
为什么 textarea 中的换行符在提交后可能会丢失?
这是一个常见的问题。不同的操作系统和浏览器对换行符的表示方式可能不同(例如,Windows 使用 \r\n,Linux 使用 \n,macOS 使用 \r)。当表单提交时,浏览器可能会对换行符进行统一处理,导致在服务器端接收到的换行符与原始输入不一致,甚至丢失。
解决这个问题的方法是在服务器端对接收到的文本进行处理,将不同类型的换行符统一转换为一种格式。例如,可以使用 PHP 的 nl2br() 函数将换行符转换为 HTML 的 标签,以便在网页上正确显示。
$comment = $_POST['comment']; $formattedComment = nl2br($comment); // 将换行符转换为
标签 echo $formattedComment;
textarea 如何实现自动高度调整?
textarea 的高度默认是固定的,当用户输入的文本超过可见区域时,会出现滚动条。为了提供更好的用户体验,可以实现 textarea 的自动高度调整,使其能够根据内容自动伸缩。
一种实现方法是使用 JavaScript 监听 textarea 的 input 事件,并在事件处理函数中动态调整 textarea 的高度。
const textarea = document.querySelector('textarea');
textarea.addEventListener('input', function() {
this.style.height = 'auto'; // 先将高度设置为 auto,以便计算实际高度
this.style.height = (this.scrollHeight) + 'px'; // 根据 scrollHeight 设置新的高度
});这段代码首先将 textarea 的高度设置为 auto,以便能够计算出实际的内容高度(scrollHeight)。然后,将 textarea 的高度设置为 scrollHeight,从而实现自动高度调整。需要注意的是,为了使这段代码生效,textarea 的 CSS 样式中不能设置固定的高度。









