Javascript 填充高度后如何使文本区域扩大？

我有一个

textarea

，它有一个特定的最小高度，并根据我的设置使其可扩展。问题是它在填充其最小高度之前会展开，所以我希望它首先填充其给定高度，然后展开

这是一个

代码如下：

HTML:

JS:

我试图将

textarea

和

pre

元素的最小高度设置为与容器

div

相同，但没有改变任何事情

---

我很乐意提供任何建议。

观察到的文本区域在输入之前扩展的问题是因为您没有重置

。展开{
最大高度：200px；
溢出：隐藏；
宽度：83%；
最小高度：计算（5雷姆-0.5雷姆-0.5雷姆）；
位置：相对位置；
背景色：#eee；
}
.扩展文本区域，
.扩展预处理{
空白：预包装；
单词包装：打断单词；
文本对齐：左对齐；
宽度：calc（100%-0.5rem-1rem）；
最小高度：100%；
填充：0.5雷姆1雷姆0.5雷姆0.5雷姆；
/*重置保证金*/
保证金：0；
}
.扩展文本区域{
调整大小：无；
边界：无；
位置：绝对位置；
顶部：0；左侧：0；
溢出：可见；
/*不相关的样式，仅为可见性而添加*/
背景色：#ccc；
}



观察到的文本区域在输入之前扩展的问题是因为您没有重置

。展开{
最大高度：200px；
溢出：隐藏；
宽度：83%；
最小高度：计算（5雷姆-0.5雷姆-0.5雷姆）；
位置：相对位置；
背景色：#eee；
}
.扩展文本区域，
.扩展预处理{
空白：预包装；
单词包装：打断单词；
文本对齐：左对齐；
宽度：calc（100%-0.5rem-1rem）；
最小高度：100%；
填充：0.5雷姆1雷姆0.5雷姆0.5雷姆；
/*重置保证金*/
保证金：0；
}
.扩展文本区域{
调整大小：无；
边界：无；
位置：绝对位置；
顶部：0；左侧：0；
溢出：可见；
/*不相关的样式，仅为可见性而添加*/
背景色：#ccc；
}



特里已经给出了正确的答案。这只是使用
contenteditable
获得简单自动扩展文本区域的另一个解决方案，无需JavaScript：


//只需要一些JS来获取值。。。
document.getElementsByTagName（'button'）[0]。addEventListener（'click'，（）=>{
const tarea=document.querySelector（'.textarea'）；
常量值=tarea.innerText；
console.log（值）；
} );
.textarea{
边框：1px实心#ccc；
最小高度：4rem；
最大高度：200px；
溢出：自动；
}

获取值
特里已经给出了正确的答案。这只是使用
contenteditable
获得简单自动扩展文本区域的另一个解决方案，无需JavaScript：


//只需要一些JS来获取值。。。
document.getElementsByTagName（'button'）[0]。addEventListener（'click'，（）=>{
const tarea=document.querySelector（'.textarea'）；
常量值=tarea.innerText；
console.log（值）；
} );
.textarea{
边框：1px实心#ccc；
最小高度：4rem；
最大高度：200px；
溢出：自动；
}

获取值
谢谢，它工作得很好，我没想到它会是simpleThank你工作得很好，我没想到它会是simpleThank你的答案也是正确的，但我被要求使用文章中提到的技术无需担心。我只是想给出另一个解决方案。谢谢，你的回答也是正确的，但我需要使用文章中提到的技巧。只是想给出另一个解决方案。
<div class="expand js-expand">
  <pre><span></span><br></pre>
  <textarea></textarea>
</div>

.expand {
  max-height: 100px;
  overflow: hidden;
  width:83%; 
  min-height: calc(5rem - 0.5rem - 0.5rem); 
  position: relative; 
  background-color:  #ffffff; 
}

.expand textarea,
.expand pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align: left;  
  width: calc(100% - 0.5rem - 1rem);
  min-height: 100%;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
    
}

.expand textarea {
    resize: none;
    border: none;
    position: absolute;
    top: 0; left: 0;
    overflow: visible;
  
}

expandtextarea(document.querySelector('.js-expand'));

function expandtextarea(container) {
    var tarea = container.querySelector('textarea');
    var mirror = container.querySelector('span');
    tarea.addEventListener('input', function(e) {
        mirror.textContent = tarea.value;
    });
}