简单介绍：
<textarea>标签定义多行文本输入控件。<textarea>元素通常用在表单中，用于收集用户的输入，如评论或评论。- 文本区域可以容纳无限数量的字符，并且文本以等宽字体（通常是 Courier）呈现。
- 文本区域的大小由 cols 和 rows 属性（或使用 CSS）规定。
- 提交表单后需要 name 属性来引用表单数据（如果省略 name 属性，则不会提交文本区域的数据）。
- 需要 id 属性将文本区域与标签（label）相关联。
- 可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。
常用属性：
| autofocus | autofocus | 规定当页面加载时，文本区域自动获得焦点。 |
| cols | number | 规定文本区域内可见的宽度。 |
| disabled | disabled | 规定禁用文本区域。 |
| form(New) | form_id | 定义文本区域所属的一个或多个表单。 |
| maxlength(New) | number | 规定文本区域允许的最大字符数。 |
| name | text | 规定文本区域的名称。 |
| placeholder(New) | text | 规定一个简短的提示，描述文本区域期望的输入值。 |
| readonly | readonly | 规定文本区域为只读。 |
| required(New) | required | 规定文本区域是必需的/必填的。 |
| rows | number | 规定文本区域内可见的行数。 |
| wrap(New) | hard soft | 规定当提交表 |
使用场景：
textArea自适应高度
提醒： 下面的三种方法在Enter键提交表单时都要额外处理一下，因为Enter键会换行，这样会带来一定的高度样式的不正确性，所以这时我们可以用event.preventDefault来阻止Enter键换行的默认行为。
第一种方法：通过用隐藏div（ 或者使用pre标签）撑起高度的方式来设置文本域自适应高度；
思路：
- 将 textarea 外面套一个容器box，同时在这个box中放入一个隐藏的div（visibility:hidden）；
- 将容器box设置成position:relative，将textArea设置成position:absolute，这样textArea不会占据容器box的任何高度了，也就是说容器box的高度就是有隐藏的div的高度撑开；
- 监听 textarea 的输入事件并将其中的文本动态的同步到div中，这样div 就可以撑开容器box；
- 由于div的高度和文本框的高度一致，那么 textarea 的高度自然就是其中文字内容的高度了 (注意div的样式要跟textArea的样式设置的一模一样，特别是line-height, font-size等会影响高度的样式，一定要一样) ；
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: auto;
border: 1px solid #ccc;
}
textarea {
width: 100%;
height: 100%;
resize: none;
border: none;
padding: 10px;
box-sizing: border-box;
font-size: 16px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overgflow:hidden;//也可以不设置成hidden, 这样在高度超出一定下会显示滚动条以显示textArea的完整内容
}
.hidden-div {
visibility: hidden;
white-space: pre-wrap;
word-wrap: break-word;
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<textarea id="textarea"></textarea>
<div class="hidden-div" id="hiddenDiv"></div>
</div>
<script>
const textarea = document.getElementById('textarea');
const hiddenDiv = document.getElementById('hiddenDiv');
textarea.addEventListener('input', function() {
hiddenDiv.textContent = textarea.value + '\n';
});
</script>
</body>
</html>
第二种方法：通过用JS中的scrollHeight手动设置textArea的高度；
思路：
- 通过document的获取元素的方法得到 textarea 元素的相关信息并将textarea 设置成不能通过拖拽改变大小：resize: none；
- 监听 textarea 的输入事件并对其进行高度的设置，与scrollHeight高度进行同步；
- textArea.style.height = 'auto' 这句话必须写 不然会导致删除文字之后textArea框剩下的文字不会进行自适应高度，出现大块空白；
- 当然下面是简单的例子，大家也还可以在监听的input方法中判断输入框有无值进行高度的设置，有值自适应，无值的时候设置默认高度等......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Resize Textarea</title>
<style>
textarea {
resize: none;
overflow: hidden;
}
</style>
</head>
<body>
<textarea id="textarea" rows="1" placeholder="Type something.." (input)="adjustHeight()"></textarea>
<script>
adjustHeight() {
const textArea = document.getElementById('textarea') as HTMLTextAreaElement;
//下面这句话必须写 不然会导致删除文字textArea剩下的文字不会自适应高度
textArea.style.height = 'auto';
//下面这句话是关键句 可以让textArea的高度根据文字内容的高度进行自适应
textArea.style.height = textArea.scrollHeight + 'px';
}
</script>
</body>
</html>第三种方法：通过div的contenteditable属性模拟textarea文本域实现高度自适应；(代码演示：https://www.zhangxinxu.com/study/201012/div-textarea-height-auto.html)
//CSS
.test_box {
width: 400px;
min-height: 120px;
max-height: 300px;
_height: 120px;
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 12px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
_overflow-y: visible;
}
//HTML
<div class="test_box" contenteditable="true"><br /></div> 注意事项：
- 问：textArea框有个时候最下面会莫名其妙的出现一段空白，这是为什么呢？
- 答：textarea标签没有写到同一行会出现这种问题（https://www.cnblogs.com/orange-tree/archive/2012/11/16/2772882.html）
参考链接及感谢：
div模拟textarea文本域轻松实现高度自适应 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)
javascript - textarea高度自适应的两种方案 - 前端学习路-郭盖 - SegmentFault 思否
