背景

输入框是个很web应用中常见的交互元素，很多时候我们会有这种需求，需要固定输入框的宽度，高度随着输入内容的增多而自动增加，到达指定的最大高度后不再增加。

说明

自动增高的输入框需要用textarea元素来实现。想要实现textarea的自动增高，有两个关键点

  1. 如何增加输入框高度
  2. 如何知道输入给定内容后输入框的高度是多少

对于第一个问题，如何实现高度的改变呢？答案是js设置其style.height属性，因为目前我还不了解如何通过css去实现高度自适应。

对于第二个问题，我们希望输入框高度被其中的内容自动撑开，被撑开的高度其实就是textarea的scrollHeight属性值对应的高度。

解决了以上问题，我们就有了思路：监听textarea的onchange或者oninput事件，内容改变后，我们就将textarea的height设置为其scrollHeight。这样，随着内容的增多，textarea会跟随内容自动增高。但是这样做会遇到一个问题：当你删除一些内容，导致内容行数减少，textarea的高度没法自动减少。因此我们需要再设置另外一个辅助的textarea，辅助textarea其实是不可见的，它用于确定给定内容对应的高度。对应辅助textarea，我们称输入内容的textarea为主textarea。

我们的最终方案是：当主textarea的内容变化时，取textarea.value赋值给辅助textarea，然后获取辅助textarea的scrollHeight再赋值给主textarea的height。

代码

  1. <html>
  2. <head>
  3.     <title>自动增高textarea demo</title>
  4.     <style type="text/css">
  5.         html {
  6.             font-size: 80px;
  7.         }
  8.         #primary {
  9.             font-size: 30px;
  10.             width: 100px;
  11.             height: 60px;
  12.             max-height: 300px;
  13.             border: 1px solid red;
  14.         }
  15.         #assistant {
  16.             font-size: 30px;
  17.             position: absolute;
  18.             top: -999px;
  19.             left: -999px;
  20.             width: 100px;
  21.             border: 1px solid #000;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <textarea id="primary" oninput="onprimaryinput()"></textarea>
  27.     <textarea id="assistant" disabled="disabled"></textarea>
  28.     <p>
  29.         实现方式：两个textarea元素，一个负责输入，一个负责计算高度
  30.         步骤：
  31.         1. 取主textarea value 赋值给辅助textarea
  32.         2. 取辅助textarea的scrollHeight，赋值给主textarea的style.height
  33.         注意：scrollHeight比height要高 3 个像素，因此需要减去 3 px
  34.     </p>    
  35. </body>
  36. <script type="text/javascript">
  37.     function onprimaryinput() {
  38.         var value = document.getElementById('primary').value;
  39.         document.getElementById('assistant').value = value;
  40.         document.getElementById('primary').style.height = document.getElementById('assistant').scrollHeight - 3 + 'px';
  41.     }
  42. </script>
  43. </html>