CSS:允许文本区域随着内容增长到一个限制

Question

在某些站点(例如 Github)上，文本区域有一组 min-height 和 max-height。当用户输入它们时，它们会随着内容一起增长，直到达到最大高度。然后出现垂直滚动条。

这个效果是如何实现的？即使未达到指定的 max-height

，我的 textarea 也不会随其内容一起增长

textarea{
  width:100%;
  min-height:80px;
  max-height:200px;
  overflow:auto;
}

Look at this demo

Answer 1

看看这个 Pen .

JS

这段代码可以解决问题:

var textarea = document.querySelector('textarea');

textarea.addEventListener('keydown', autosize);

function autosize(){
  var el = this;
  setTimeout(function(){
    el.style.cssText = 'height:auto; padding:0';
    // for box-sizing other than "content-box" use:
    // el.style.cssText = '-moz-box-sizing:content-box';
    el.style.cssText = 'height:' + el.scrollHeight + 'px';
  },0);
}

CSS

我将它添加到 css 中，使其只能垂直调整大小:

  resize:vertical;