textarea是html中用于让用户输入大段文字的控件，常见于评论区、留言板等场景。1.基本用法通过
TextArea，说白了，就是让用户输入大段文字的地方。想想评论区、留言板，都离不开它。但用起来，还真有些小细节要注意。
解决方案
TextArea在HTML里用标签定义。最基本的用法是：
立即学习“前端免费学习笔记（深入）”；
-
name: 提交表单时，这个名字会和TextArea里的内容一起发送给服务器。 -
rows: 设置TextArea显示多少行。注意，这只是个建议值，用户还是可以输入更多行。 -
cols: 设置TextArea显示多少列。同样，只是建议值。 - TextArea标签之间可以放默认文本，就像上面例子里的“在这里输入你的留言...”。
但光这样还不够，TextArea还有很多玩法。
如何限制TextArea的输入字数？
限制字数是个很常见的需求。直接在HTML里用maxlength属性：
这样，用户最多只能输入200个字符。但要注意，maxlength只是前端限制，为了安全，后端也一定要做字数校验！
如果想实时显示剩余字数，可以用JavaScript实现：
200 字符剩余
这段代码监听TextArea的input事件，每次输入都更新剩余字数。
如何禁用TextArea的自动换行？
有时候，我们希望用户输入的内容保持在一行，比如输入标签。可以用CSS的white-space属性：
该网站程序ASP+Access开发，拥有完善的网站前台和后台管理功能，前台完全纯Html生成，本套源适合大部分中小企业建站需求。 网站前台生成PC版和WAP版，适合现在主流推广方式一、网站管理非常简单易用 二、单页介绍系统、图文展示、文章管理三、前台纯HTML静态文件生成四、前台生成PC和WAP两个版本，更实用
-
white-space: nowrap: 禁止换行。 -
overflow-x: auto: 如果内容超出TextArea宽度，显示横向滚动条。
如何让TextArea自动适应内容高度？
让TextArea随着内容自动伸缩，用户体验会更好。可以用JavaScript实现：
这段代码监听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攻击。一定要对用户输入的内容进行转义，比如把转义成zuojiankuohaophpcn，>转义成youjiankuohaophpcn。
前端可以用JavaScript转义：
function escapeHtml(text) {
var map = {
'&': '&',
'<': 'zuojiankuohaophpcn',
'>': 'youjiankuohaophpcn',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}
const escapedValue = escapeHtml(textarea.value);但最安全的做法是在后端进行转义，因为前端的转义可能会被绕过。
TextArea的placeholder属性有什么用？
placeholder属性可以在TextArea里显示提示文字，当用户输入内容时，提示文字会自动消失。
但要注意，placeholder不是label的替代品。label是用来描述TextArea的，placeholder只是用来提示用户输入什么内容。对于可访问性来说，label更重要。
