无法动态设置高度为textarea

我有一个textarea，其中textarea的高度将根据文本长度动态增加。一旦达到200px的高度，就会出现滑动。不知何故，当我在滚动出现后删除文本时，我无法降低高度。即使内容未被完全占用，高度也保持不变。无法动态设置高度为textarea

我想与在https://www.intercom.com/聊天中的textarea（动态）匹配。

HTML & JS

<div class="container"> 
     <textarea placeholder="Text goes here..." onkeydown="expand(this)" onkeyup="expand(this)"></textarea> 
    </div> 
    <script> 
     function expand(element) { 
     if (element.scrollHeight < 200) { 
      element.style.height = "0px"; 
      element.style.height = (element.scrollHeight) + "px"; 
     } else { 
      element.style.height = "200px"; 
      element.style.overflowY = "auto"; 
     } 
     } 

    </script>

CSS

.container { 
    min-height: 16px; 
    max-height: 200px; 
    width: 300px; 
} 

.container textarea { 
    max-height: none; 
    max-width: none; 
    min-height: 0; 
    min-width: 0; 
    color: #565867; 
    background-color: #f4f7f9; 
    resize: none; 
    //border: none; 
    overflow: hidden; 
    font-size: 14px; 
    width: 100%; 
    height: 100%; 
}

Fiddle here

来源

2017-05-18 Raviteja

当我写够文本显示滚动条，当我删除某些文字的滚动条被删除，textarea的正变得越来越小。所以我似乎不能从你的小提琴手重新创造问题。 –

Textarea默认大小不匹配。获得额外的线路。 – Raviteja

我的版本中没有“额外的行”。 –

更改下面的代码，使其工作

.container { 
    min-height:18px; 
    max-height: 200px; 
    width: 300px; 
}

到

.container { 
    height:18px; 
    max-height: 200px; 
    width: 300px; 
}

来源

2017-05-18 11:56:16

无法动态设置高度为textarea

回答

相关问题