Question

我的textarea修复height 70px。当我多次按Enter键换新行时，我想让height的{{1}}增长。此时，在第6行之后出现滚动条。这是有道理的，因为textarea的修复height。但是有办法解决这个问题吗？

70px

textarea {
  min-height: 70px;
}

Answer 1

您可以使用简单的javascript函数处理此问题，请查看代码段：

var textarea = document.getElementById('txtArea');

textarea.addEventListener('keydown', autosize);
             
function autosize(){
  var el = this;  
    setTimeout(function(){
      el.style.cssText = 'height:auto; padding:0';
      el.style.cssText = 'height:' + el.scrollHeight + 'px';
    },0);
  
}

textarea {
  min-height: 70px;
  overflow: hidden;
}

<textarea id="txtArea">Hello World! Click "enter" for more lines </textarea>

另外，如果您愿意，可以添加最大高度，这里是片段：

var textarea = document.getElementById('txtArea');

textarea.addEventListener('keydown', autosize);
             
function autosize(){
  var el = this;
  el.style.cssText = 'overflow: hidden !important';
  
  if (el.scrollHeight > 120){
      el.style.cssText = 'overflow: scroll !important';
      el.style.cssText = 'height: 120px';
      textarea.removeEventListener('keydown', autosize);
  }else{
    setTimeout(function(){
      el.style.cssText = 'height:auto; padding:0';
      el.style.cssText = 'height:' + el.scrollHeight + 'px';
    },0);
  }
}

textarea {
  min-height: 70px;
}

<textarea id="txtArea">Hello World! Click "enter" for more lines </textarea>

单击enter键使得修复高度增加的textarea（中断到新行）

1 个答案: