javascript - 动态调整前元素标签的大小

Question

我试图让我的<div>动态，以便它的垂直高度自动增加。目前我正在使用<textarea>它来定义其中的内容。但我想将其替换<pre>为使其更有效。欢迎提出任何建议或解决方案。

Code

document.addEventListener('DOMContentLoaded', () => {
  textArea.addEventListener('change', autosize, false)
  textArea.addEventListener('keydown', autosize, false)
  textArea.addEventListener('keyup', autosize, false)
  autosize()
}, false)

function autosize() {
  textCopy.innerHTML = textArea.value.replace(/\n/g, '<br/>')
}

html,
body,
textarea {
  font-family: sans-serif;
  font-size: 14px;
}

.textarea-container {
  position: relative;
}

.textarea-container>div,
.textarea-container>textarea {
  word-wrap: break-word;
  box-sizing: border-box;
  padding: 2px;
  width: 100%;
}

.textarea-container>textarea {
  overflow: hidden;
  position: absolute;
  height: 100%;
}

.textarea-container>div {
  padding-bottom: 1.5em;
  visibility: hidden;
}

<div class="textarea-container">
  <textarea id="textArea"></textarea>
  <div id="textCopy"></div>
</div>

标签： javascriptcss

Answer 1

我只是将高度更改为滚动大小

textArea.style.height = "23px";
document.addEventListener('DOMContentLoaded', () => {
  textArea.addEventListener('change', autosize, false)
  textArea.addEventListener('keydown', autosize, false)
  textArea.addEventListener('keyup', autosize, false)
}, false)

function autosize() {
  textArea.style.height = parseInt(textArea.scrollHeight) + 'px';
}

html,
body,
textarea {
  font-family: sans-serif;
  font-size: 14px;
}

.textarea-container {
  position: relative;
}

.textarea-container>div,
.textarea-container>textarea {
  word-wrap: break-word;
  box-sizing: border-box;
  padding: 2px;
  width: 100%;
}

.textarea-container>textarea {
  overflow: hidden;
  position: absolute;
  height: 23px;
}

.textarea-container>div {
  padding-bottom: 1.5em;
  visibility: hidden;
}

<div class="textarea-container">
  <textarea id="textArea"></textarea>
</div>