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相同，但它没有改变任何东西。

我很乐意提出任何建议。

Answer 1

观察到textarea在输入之前扩展的问题是因为你没有重置<pre>元素的边距，这是指示父元素高度的实际元素。

这意味着<pre>占用的空间将永远是它的高度+（非零）边距，这会导致额外的空间，并给出一个幻觉，即你最后有一条额外的线textarea。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

特里已经给出了正确答案。这只是使用contenteditable获取简单的自动扩展textarea而不使用JavaScript的另一种解决方案：

＆＃13;

// Just some JS to get the value...
document.getElementsByTagName( 'button' )[ 0 ].addEventListener( 'click', () => {
  const tarea = document.querySelector( '.textarea' );
  const value = tarea.innerText;
  
  console.log( value );
} );

＆＃13;

.textarea {
  border: 1px solid #ccc;
  min-height: 4rem;
  max-height: 200px;
  overflow: auto;
}

＆＃13;

<div contenteditable class="textarea" aria-role="textbox"></div>
<button>Get value</button>

＆＃13;

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

2 个答案: