前两天看到有大佬写了一个实现自适应高度输入框的文章，链接为：
https://juejin.cn/post/6844903660875415565
该文章总结的非常全面，给出了三种不同的实现方式（强烈建议先阅读上面链接的文章）。
我看到了文章中的第三种实现方式，想到了一个非常简单的方法。
先看看效果：
说一下原理：
文章中第三种方式使用的是scrollHeight属性，然后文章中的矛盾点是如何解决删除字符时的高度计算。
scrollHeight有一个特性，恰巧满足了自适应高度的需求，scrollHeight会随着容器内容的高度变化。既然这样，我们可以用一个隐藏的textarea来专门计算scrollHeight。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
<title>Test</title>
<style type="text/css">
.common { resize: none; width: 200px; height: 50px; }
.hide{ position: fixed; left: -9999px; }
</style>
</head>
<body>
<textarea class="common" placeholder="测试测试测试" id="txt"></textarea>
<textarea class="common hide" disabled placeholder="edit" id="edit"></textarea>
<script type="text/javascript">
const txt = document.getElementById("txt");
const edit = document.getElementById("edit");
txt.addEventListener('input', (e) => {
edit.innerText = e.target.value;
txt.style.height = edit.scrollHeight + 'px';
}, false);
</script>
</body>
</html>代码非常简单：
1. edit是看不见的textarea，disabled防止用户tab键切换input时不小心让其focus，然后通过绝对定位将其移除屏幕。
2. txt是真正与用户交互的textarea，在txt的input事件触发时，将事件对象的value给edit，让他们拥有相同的内容。此时，edit的scrollHeight是内容的真实高度。将txt的高度设为edit的scrollHeight即可。
目前还不清楚该方法会不会引起什么问题，欢迎大家讨论。
另外
有赞招前端，内推简历发邮箱：songxiquan@youzan.com
详情：https://m.zhipin.com/weijd/v2/job/914568a776688ffc1XV43tu5E1c~?date8=20180818&sid=self_jd
