JavaScript代码，如何控制<textarea>高度自动拉伸
星级：
“
前端代码编程，输入域<textarea>高度自动拉伸可以事先为输入域设置一个rows属性，然后通过监听输入域的输入动作oninput，当发现输入域出现滚动条时，即属性scrollHeight大于属性clientHeight时，rows自动加1，即可实现高度自动拉伸需求。
”
在前端代码编程时，可能会有客户提出HTML输入域<textarea></textarea>高度自动拉伸的要求，即当用户在一个文本域中输入的文本过多时，输入域默认不会自动拉伸高度以展示输入全文，取而代之的是出现滚动条并只显示部分文本。
如果想要实现输入域<textarea></textarea>高度自动拉伸，其实很简单，可以通过监听输入域的scrollHeight 属性与clientHeight属性值的差异判断，从而实现输入域高度的自动拉伸。
在输入域的属性当中，
clientHeight 指的是输入域在设备上展示的高度；
scrollHeight 指的则是输入域包含在滚动条隐藏的真正高度；
所以，
当输入域的滚动条【不可见】的时候，scrollHeight和 clientHeight 是相等的；
当输入域的滚动条【可见】的时候，scrollHeight将大于clientHeight ，因为有部分高度被隐藏了。
<script>
//获取输入域元素
var test_textarea = document.getElementById('test-textarea')
//监听输入域输入动作
test_textarea.oninput = function(){
//获取输入域行数
var textarea_rows = test_textarea.getAttribute("rows");
textarea_rows = Number(textarea_rows);
//判断输入域 scrollHeight 与 clientHeight
if (test_textarea.scrollHeight - test_textarea.clientHeight > 0) {
//当scrollHeight大于clientHeight时，行数自动加1
test_textarea.setAttribute("rows", textarea_rows + 1);
}
}
</script>不过，以上方法有一个缺点，那就是在删除输入域文本导致内容行数变短时，输入域高度不会自动缩回，也即只能算是高度自动拉伸，而不能算是自适应，因为不能自动回缩，但这也已经能满足大部分用户的需求了，而且代码也足够简单，因此没有强烈的自适应需求的话，建议使用这一代码。
注意，利用此段代码时，输入域<textarea> 必须设置rows属性值，否则JS代码读取不到rows属性值，会出现rows="NaN"错误。
另外，这里没有使用jQuery，有兴趣的朋友可以使用jQuery对这段代码进行改造，也不难。
附全部测试代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>输入域测试</title>
<style type="text/css">
.page{
text-align: center;
}
.page textarea{
width: 500px;
margin-top: 100px;
padding: 10px;
line-height: 1.5;
font-size: 16px;
}
</style>
</head>
<body>
<div class="page">
<textarea rows="8" id="test-textarea"></textarea>
</div>
</body>
<script>
//获取输入域元素
var test_textarea = document.getElementById('test-textarea')
//监听输入域输入动作
test_textarea.oninput = function(){
//获取输入域行数
var textarea_rows = test_textarea.getAttribute("rows");
textarea_rows = Number(textarea_rows);
//判断输入域 scrollHeight 与 clientHeight
if (test_textarea.scrollHeight - test_textarea.clientHeight > 0) {
//当scrollHeight大于clientHeight时，行数自动加1
test_textarea.setAttribute("rows", textarea_rows + 1);
}
}
</script>