javascript - 如何在填充高度后使textarea扩展？

Question

我有一个 textarea 具有特定的最小高度并且基于 this article我让它可扩展。问题是它在填满最小高度之前会展开，所以我希望它先填满给定高度，然后再展开。

这是一个fiddle

代码如下:

HTML:

<div class="expand js-expand">
  <pre><span></span><br></pre>
  <textarea></textarea>
</div>

CSS:

.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;
  
}

JS:

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;
    });
}

我试图将 textarea 和 pre 元素的最小高度设置为与容器 div 相同，但它没有改变 a

我很乐意提出任何建议。

Answer 1

观察到的文本区域在输入之前展开的问题是因为您没有重置 <pre> 的边距元素，它是决定父元素高度的实际元素。

这意味着<pre>占用的空间将始终是它的高度 +(非零)边距，这会导致额外的空间并给人一种错觉，即您在文本区域的末尾有一条额外的线。

如果您只是将其重置为 margin: 0 , 你会看到你的 <textarea>现在将具有与 <pre> 相同的计算外部高度元素:

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;
	});
}

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

.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;
  
  /* Reset margin */
  margin: 0;
}

.expand textarea {
	resize: none;
	border: none;
	position: absolute;
	top: 0; left: 0;
	overflow: visible;
  
  /* Irrelevant style, added for visibility only */
  background-color: #ccc;
}

<div class="expand js-expand">
  <pre><span></span><br></pre>
  <textarea></textarea>
</div>