textarea 的 scrollheight 增加不一致的问题

Question

这个问题不是很容易解释，所以如果这个问题看起来令人困惑，我深表歉意。

基本上，我有一个 <textarea> 身高根据其值变化的人。如果有任何垂直溢出（通常会产生垂直滚动条），我会增加 <textarea> 的高度以匹配它的 scrollHeight 属性。这对于前两行似乎工作得很好，但是当添加更多文本时，我注意到 scrollHeight 增加的点对于每一行文本都是不同的。

这里有一个 fiddle 演示了奇怪的行为：http://jsfiddle.net/2zpkf6fL/2/

键入大约 5 或 6 行文本，您就会明白我在说什么。

任何人都可以阐明这个问题吗？为什么 scrollHeight 会在不同的文本行的不同点增加？

Answer 1

这是我如何做你想做的事情。

HTML:

    <div class="textarea-container">
  <textarea></textarea>
  <div class="textarea-size"></div>
</div>

CSS:

.textarea-container {
  position: relative;
  /* you should change this*/
  width: 50%;
}

textarea, .textarea-size {
  min-height: 25px;
  /* need to manually set font and font size */
  font-family: sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  padding: 4px;
  border: 1px solid;

  overflow: hidden;
  width: 100%;
}

textarea {
  height: 100%;
  position: absolute;
  resize:none;

  /*
  "pre" or "preline" or "normal" fixes Chrome issue where
    whitespace at end of lines does not trigger a line break.
  However, it causes the text to exhibit the behavior seen with
    "pre" that is described below.
   */
  white-space: normal;
}

.textarea-size {
  visibility: hidden;

  /*
  Pre-wrap: preserve spacing and newlines, but wrap text.
  Pre: preserve spacing and newlines but don't wrap text.

  "pre" does not wrap well on Firefox, even with word-wrap:break-word.
  "pre" on Chrome works with word-wrap, but exhibits different behavior:
  Instead of entire words being moved to the next line for wrapping,
  the browser will cut words in the middle for wrapping.
  "pre-line" has Firefox issues
  */
  white-space: pre-wrap;
  /* Required for wrapping lines in Webkit,
    but not necessary in Firefox if you have white-space wrapping
    (pre-wrap, normal, pre-line) already set */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

脚本：

var textContainer, textareaSize, input;
var autoSize = function () {
  textareaSize.innerHTML = input.value + '\n';
};

document.addEventListener('DOMContentLoaded', function() {
  textContainer = document.querySelector('.textarea-container');
  textareaSize = textContainer.querySelector('.textarea-size');
  input = textContainer.querySelector('textarea');

  autoSize();
  input.addEventListener('input', autoSize);
});

这里是jsfiddle

textarea 的 scrollheight 增加不一致的问题

Issues with textarea's scrollheight increasing inconsistently

html

javascript

textarea