Facebookみたいに改行に合わせて伸びるフォーム

ググったらなんか無駄に複雑にサンプル多かったんだけど、これでいいじゃんって感じで落ち着いた。

var el = document.querySelector("textarea.your-text-area")
el.addEventListener("input", function(ev) {
  if (parseInt(el.rows, 10) < 8) {
    const currentRow = el.value.split("\n").length;
    el.rows = currentRow + 1;
  }
});

3行目で8行以上多くならないようにしてある。Githubのフォームがこんな仕様だったので真似した。無限に伸ばしたかったら外せば良い。

jQueryは必要ないです。

追記

よく考えたら折り返し考慮してなかったので、もっかい考える。

追記

こうなった

function fitToContent(el, maxHeight) {
  let adjustedHeight = el.clientHeight;
  if ( !maxHeight || maxHeight > adjustedHeight ) {
    adjustedHeight = Math.max(el.scrollHeight, adjustedHeight);
    if ( maxHeight ) {
      adjustedHeight = Math.min(maxHeight, adjustedHeight);
    }
    if ( adjustedHeight > el.clientHeight ) {
      el.style.height = adjustedHeight + "px";
    }
  }
}
el.addEventListener("input", _ev => {
  fitToContent(el, 180);
});