textarea是html中用于让用户输入大段文字的控件，常见于评论区、留言板等场景。1.基本用法通过<textarea>标签定义，并可设置name、rows、cols属性；2.限制输入字数可用maxlength属性，并配合javascript实时显示剩余字数；3.禁用自动换行可通过css的white-space: nowrap实现；4.自动适应内容高度可用javascript动态调整height样式；5.textarea中的换行符在不同系统中表示不同，javascript中可用正则统一替换为\n；6.防止xss攻击需对用户输入进行转义处理，推荐在后端执行；7.placeholder属性用于显示输入提示，但不能替代label标签以确保可访问性。
TextArea，说白了，就是让用户输入大段文字的地方。想想评论区、留言板，都离不开它。但用起来，还真有些小细节要注意。
解决方案
TextArea在HTML里用<textarea>标签定义。最基本的用法是：
立即学习“前端免费学习笔记（深入）”；
<textarea name="message" rows="10" cols="30"> 在这里输入你的留言... </textarea>
-
name: 提交表单时，这个名字会和TextArea里的内容一起发送给服务器。 -
rows: 设置TextArea显示多少行。注意，这只是个建议值，用户还是可以输入更多行。 -
cols: 设置TextArea显示多少列。同样，只是建议值。 - TextArea标签之间可以放默认文本，就像上面例子里的“在这里输入你的留言...”。
但光这样还不够，TextArea还有很多玩法。
如何限制TextArea的输入字数？
限制字数是个很常见的需求。直接在HTML里用maxlength属性：
<textarea name="message" maxlength="200"></textarea>
这样，用户最多只能输入200个字符。但要注意，maxlength只是前端限制，为了安全，后端也一定要做字数校验！
如果想实时显示剩余字数，可以用JavaScript实现：
<textarea id="myTextarea" name="message" maxlength="200"></textarea>
<span id="charCount">200</span> 字符剩余
<script>
const textarea = document.getElementById('myTextarea');
const charCount = document.getElementById('charCount');
textarea.addEventListener('input', function() {
const remaining = 200 - this.value.length;
charCount.textContent = remaining;
});
</script>这段代码监听TextArea的input事件，每次输入都更新剩余字数。
如何禁用TextArea的自动换行？
有时候，我们希望用户输入的内容保持在一行，比如输入标签。可以用CSS的white-space属性：
<textarea style="white-space: nowrap; overflow-x: auto;"></textarea>
-
white-space: nowrap: 禁止换行。 -
overflow-x: auto: 如果内容超出TextArea宽度，显示横向滚动条。
如何让TextArea自动适应内容高度？
让TextArea随着内容自动伸缩，用户体验会更好。可以用JavaScript实现：
<textarea id="autoResizeTextarea" style="overflow:hidden;"></textarea>
<script>
const textarea = document.getElementById('autoResizeTextarea');
textarea.addEventListener('input', function() {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
</script>这段代码监听TextArea的input事件，每次输入都重新计算TextArea的高度。overflow:hidden是为了防止出现滚动条。
TextArea里的换行符怎么处理？
TextArea里的换行符在不同操作系统里不一样。
- Windows:
\r\n - Linux/Unix:
\n - Mac (旧版):
\r
在JavaScript里，可以用正则表达式统一替换成\n：
const textareaValue = textarea.value.replace(/\r\n|\r/g, '\n');
后端也需要做类似的处理，确保换行符的一致性。
如何防止TextArea被XSS攻击？
TextArea是用户输入的地方，很容易被XSS攻击。一定要对用户输入的内容进行转义，比如把<转义成，<code>>转义成>。
前端可以用JavaScript转义：
function escapeHtml(text) {
var map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}
const escapedValue = escapeHtml(textarea.value);但最安全的做法是在后端进行转义，因为前端的转义可能会被绕过。
TextArea的placeholder属性有什么用？
placeholder属性可以在TextArea里显示提示文字，当用户输入内容时，提示文字会自动消失。
<textarea name="message" placeholder="请输入你的留言..."></textarea>
但要注意，placeholder不是label的替代品。label是用来描述TextArea的，placeholder只是用来提示用户输入什么内容。对于可访问性来说，label更重要。
