<blockquote>textarea用于多行文本输入，区别于单行input；通过rows、cols、maxlength及CSS控制尺寸与限制，并结合JavaScript实现字数统计；用户输入的换行符需用white-space: pre-wrap或转为显示，同时必须转义HTML字符以防XSS攻击；富文本需求应使用RTE。</blockquote>
<p><img src="https://img.php.cn/upload/article/001/221/864/175661622786901.png" alt="textarea多行文本输入框怎么使用"></p>
<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre>
登录后复制
</div> 是 HTML 中用于创建多行文本输入框的标签，它允许用户输入比单行 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">input</pre>
登录后复制
</div> 字段更多的内容，并且可以自然地显示为多行。它在网页表单中扮演着收集用户长篇文本信息的核心角色。</p>
<h3>解决方案</h3>
<p>使用 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre>
登录后复制
</div> 标签非常直接，你只需将其放置在 HTML 文档中。最基础的用法如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><textarea name=&quot;userMessage&quot; id=&quot;message&quot; rows=&quot;5&quot; cols=&quot;30&quot; placeholder=&quot;请在这里输入您的留言...&quot;></textarea></pre>
登录后复制
</div><p>这里有几个关键点：</p>
<ul>
<li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">name</pre>
登录后复制
</div> 属性：在提交表单时，服务器端会通过这个名字来获取用户输入的内容。</li>
<li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">id</pre>
登录后复制
</div> 属性：用于 JavaScript 操作或与 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><label></pre>
登录后复制
</div> 标签关联，提供更好的可访问性。</li>
<li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">rows</pre>
登录后复制
</div> 属性：定义了文本框默认可见的行数。这不是一个硬性限制，用户通常可以输入更多内容，文本框会自动滚动。</li>
<li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">cols</pre>
登录后复制
</div> 属性：定义了文本框默认可见的字符宽度。同样，这只是一个默认显示宽度，用户可以输入更长的行。</li>
<li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">placeholder</pre>
登录后复制
</div> 属性：在用户输入内容之前，显示在文本框中的提示文本。</li>
<li>如果你想给 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre>
登录后复制
</div> 设置一个初始值，可以直接把内容放在 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><textarea></pre>
登录后复制
</div> 和 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"></textarea></pre>
登录后复制
</div> 标签之间，而不是通过 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">value</pre>
登录后复制
</div> 属性（<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">input</pre>
登录后复制
</div> 标签才用 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">value</pre>
登录后复制
</div>）。</li>
</ul><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><textarea name=&quot;initialContent&quot; rows=&quot;10&quot; cols=&quot;50&quot;>
这是一个预设的文本内容，用户可以基于此进行编辑。
</textarea></pre>
登录后复制
</div><h3>如何精细控制textarea的尺寸与输入限制？</h3>
<p>在我看来，仅仅依靠 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">rows</pre>
登录后复制
</div> 和 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">cols</pre>
登录后复制
</div> 来控制 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre>
登录后复制
</div> 的外观和行为是不够的，尤其是在追求响应式设计和更好的用户体验时。</p>
<p>要更精确地控制 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre>
登录后复制
</div> 的尺寸，CSS 是你的首选<a style="color:#f60; text-decoration:underline;" title="工具" href="https://www.php.cn/zt/16887.html" target="_blank">工具</a>。你可以使用 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">width</pre>
登录后复制
</div> 和 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">height</pre>
登录后复制
</div> 属性来设置文本框的实际像素或百分比大小。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:css;toolbar:false;'>textarea {
width: 100%; /* 占据父容器的全部宽度 */
height: 150px; /* 固定高度 */
resize: vertical; /* 允许用户只在垂直方向调整大小，也可以是 horizontal, both, none */
box-sizing: border-box; /* 确保 padding 和 border 不会增加元素总尺寸 */
}</pre>
登录后复制
</div><p>关于输入限制，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">maxlength</pre>
登录后复制
</div> 属性是 HTML5 引入的一个非常实用的特性，它允许你直接在标签中指定用户可以输入的最大字符数。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><textarea name=&quot;feedback&quot; maxlength=&quot;200&quot; rows=&quot;5&quot; placeholder=&quot;您的反馈（最多200字）&quot;></textarea></pre>
登录后复制
</div><p>不过，我个人觉得，仅仅有 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">maxlength</pre>
登录后复制
</div> 往往不足以提供最佳的用户体验。用户可能不知道自己还剩多少字，或者输入到一半突然被截断会感到困惑。这时候，JavaScript 就能派上大用场了。你可以结合 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">maxlength</pre>
登录后复制
</div> 和 JavaScript 来实现一个实时的字数统计器，让用户清楚地知道自己输入了多少字，还剩下多少字。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><textarea id=&quot;myFeedback&quot; name=&quot;feedback&quot; maxlength=&quot;200&quot; rows=&quot;5&quot; placeholder=&quot;您的反馈（最多200字）&quot;></textarea>
<p>已输入: <span id=&quot;charCount&quot;>0</span>/200</p>
<script>
const textarea = document.getElementById('myFeedback');
const charCountSpan = document.getElementById('charCount');
textarea.addEventListener('input', () => {
const currentLength = textarea.value.length;
charCountSpan.textContent = currentLength;
});
</script></pre>
登录后复制
</div><p>这种结合 HTML 属性和 JavaScript 动态反馈的方式，能显著提升用户在填写表单时的体验。</p>
<h3>textarea与input文本框有何本质区别，以及何时应优先选择textarea？</h3>
<p>这是个很基础但又很关键的问题，很多初学者或者甚至一些有经验的开发者偶尔也会混淆。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre>
登录后复制
</div> 和 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">input type=&quot;text&quot;</pre>
登录后复制
</div> 最大的本质区别在于：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">input type=&quot;text&quot;</pre>
登录后复制
</div> 是为单行文本输入设计的，而 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre>
登录后复制
</div> 则是为多行文本输入而生。</p>
<p>从技术实现上看：</p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/ai/1817">
<img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6cb8b7ef86975.png" alt="行者AI">
</a>
<div class="aritcle_card_info">
<a href="/ai/1817">行者AI</a>
<p>行者AI绘图创作，唤醒新的灵感，创造更多可能</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="行者AI">
<span>100</span>
</div>
</div>
<a href="/ai/1817" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="行者AI">
</a>
</div>
<ul>
<li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">input type=&quot;text&quot;</pre>
登录后复制
</div> 的内容通过 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">value</pre>
登录后复制
</div> 属性设置和获取。</li>
<li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre>
登录后复制
</div> 的内容则是在其开闭标签之间。</li>
<li>
<a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://www.php.cn/zt/16180.html" target="_blank">浏览器</a>通常允许用户通过拖拽右下角来调整 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre>
登录后复制
</div> 的大小（尽管可以通过 CSS <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">resize</pre>
登录后复制
</div> 属性控制），而 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">input</pre>
登录后复制
</div> 标签则没有这个特性。</li>
</ul>
<p>那么，何时应该优先选择 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre>
登录后复制
</div> 呢？我的经验是，只要你预期用户可能需要输入超过一句话、一段话，或者任何需要换行的内容，就应该毫不犹豫地选择 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre>
登录后复制
</div>。</p>
<p>具体场景包括：</p>
<ul>
<li>
<strong>用户留言或评论：</strong> 用户通常会写较长的内容，表达观点。</li>
<li>
<strong>详细描述：</strong> 产品详情、问题报告、个人简历等。</li>
<li>
<strong>电子邮件正文：</strong> 撰写邮件需要多行输入和格式化。</li>
<li>
<strong>代码片段输入：</strong> 开发者工具或博客文章中嵌入代码时。</li>
<li>
<strong>反馈表单：</strong> 收集用户对产品或服务的详细意见。</li>
</ul>
<p>反之，如果只是收集姓名、<a style="color:#f60; text-decoration:underline;" title="邮箱" href="https://www.php.cn/zt/21185.html" target="_blank">邮箱</a>、标题、搜索关键词等简短、单行的信息，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">input type=&quot;text&quot;</pre>
登录后复制
</div> 显然是更合适的选择。使用 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre>
登录后复制
</div> 来收集单行信息，不仅视觉上显得笨重，也可能误导用户以为需要输入很多内容。选择正确的输入框类型，是构建直观、高效用户界面的第一步。</p>
<h3>如何处理textarea中的用户输入，特别是换行和格式化？</h3>
<p>处理 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre>
登录后复制
</div> 中的用户输入，尤其是涉及到换行和潜在的格式化问题时，需要<a style="color:#f60; text-decoration:underline;" title="前端" href="https://www.php.cn/zt/15813.html" target="_blank">前端</a>和后端协同工作，并且要特别注意安全性。</p>
<p>当用户在 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre>
登录后复制
</div> 中按下回车键时，浏览器会将其解释为 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">\n</pre>
登录后复制
</div>（换行符）。当你从 JavaScript 获取 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea.value</pre>
登录后复制
</div> 或将表单提交到服务器时，这些 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">\n</pre>
登录后复制
</div> 都会被保留。</p>
<p><strong>显示换行：</strong>
然而，直接将带有 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">\n</pre>
登录后复制
</div> 的文本渲染到 HTML 页面上，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">\n</pre>
登录后复制
</div> 并不会自动转换为 HTML 的 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><br></pre>
登录后复制
</div> 标签来显示换行。默认情况下，HTML 会将多个空白符（包括换行符）合并为一个空格。要正确显示换行，你有几种选择：</p>
<ol>
<li>
<strong>CSS <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">white-space</pre>
登录后复制
</div> 属性：</strong> 这是最推荐的前端解决方案。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:css;toolbar:false;'>.display-area {
white-space: pre-wrap; /* 保留空白符和换行符，并在需要时自动换行 */
}</pre>
登录后复制
</div><p>然后将 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre>
登录后复制
</div> 的内容放到具有此样式的元素中。</p>
</li>
<li>
<strong>服务器端或 JavaScript 替换：</strong> 在将文本插入 HTML 之前，将所有的 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">\n</pre>
登录后复制
</div> 替换为 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><br></pre>
登录后复制
</div> 标签。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>const rawText = textarea.value;
const formattedText = rawText.replace(/\n/g, '<br>');
// 然后将 formattedText 插入到 DOM 中</pre>
登录后复制
</div><p>这种方式需要注意安全问题，因为它引入了 HTML 标签。</p>
</li>
</ol>
<p><strong>安全性（XSS 攻击）：</strong>
这是处理用户输入时最关键的一点。用户在 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre>
登录后复制
</div> 中不仅可以输入普通文本，还可能输入恶意的 HTML 或 JavaScript 代码（例如 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><script>alert('XSS');</script></pre>
登录后复制
</div>）。如果这些内容未经处理就被直接显示在你的网页上，就会导致跨站脚本（XSS）攻击。</p>
<p>因此，<strong>在将任何用户输入的内容显示到网页上之前，务必进行“转义”（Escaping）处理。</strong> 这意味着将 HTML 特殊字符（如 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><</pre>
登录后复制
</div>, <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">></pre>
登录后复制
</div>, <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&</pre>
登录后复制
</div>, <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">"</pre>
登录后复制
</div>, <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">'</pre>
登录后复制
</div>）转换为它们的 HTML 实体编码（如 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><</pre>
登录后复制
</div>, <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">></pre>
登录后复制
</div>, <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&</pre>
登录后复制
</div>）。大多数现代的后端框架或模板引擎都提供了自动转义的功能。如果手动处理，JavaScript 也可以实现：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>function escapeHtml(text) {
var map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '&#039;'
};
return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}
const safeText = escapeHtml(textarea.value);
// 然后将 safeText 放入具有 white-space: pre-wrap; 样式的元素中显示</pre>
登录后复制
</div><p><strong>格式化（富文本）：</strong>
如果你的应用需要用户输入带有粗体、斜体、列表、链接等复杂格式的内容，那么单纯的 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre>
登录后复制
</div> 就不够用了。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre>
登录后复制
</div> 只能处理纯文本。在这种情况下，你需要集成一个“富文本编辑器”（Rich Text Editor，RTE），例如 TinyMCE、Quill 或 CKEditor。这些编辑器通常会隐藏原始的 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre>
登录后复制
</div>，提供一个用户友好的所见即所得（WYSIWYG）界面，并在后台将用户的格式化内容转换为 HTML 或 Markdown 格式，然后存储起来。</p>
<p>总结一下，处理 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre>
登录后复制
</div> 内容是一个分层的过程：前端负责收集和初步的用户体验优化（如字数统计），后端负责数据的存储、验证和至关重要的安全转义，而最终的显示则需要前端 CSS 或进一步的 HTML 转换来确保内容正确呈现。</p>
以上就是textarea多行文本输入框怎么使用的详细内容，更多请关注php中文网其它相关文章！
750
收藏
