javascript - textarea autogrow 和 CSS box-sizing 的奇怪行为

Question

我正在尝试使用 Javascript 使文本区域自动增长。逻辑相当简单，这是我的工作代码:

$("#message-box").on('keydown', function() {
  var scroll_height = $("#message-box").get(0).scrollHeight;
  $("#message-box").css('height', scroll_height + 'px');
});

#message-box {
  border: 1px solid #cccccc;
  width: 400px;
  min-height: 100px;
  padding: 5px;
  overflow: hidden;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="message-box"></textarea>

一切正常，但是当我删除 box-sizing: border-box; 属性时，我看到了奇怪的东西。 随着每次按键事件，文本区域自动增长。

textarea autogrowing 和 box-sizing 属性有什么关系？

编辑
在这里查看演示:

使用 box-sizing 属性:http://52.90.45.189/aks/textarea-autogrow.html

没有 box-sizing 属性:http://52.90.45.189/aks/textarea-autogrow-no-border-box.html

我可以理解当 box-sizing 被移除时 scrollHeight 增加了 10px。但是为什么浏览器在按下某个键时 每次 都会额外增加 10px 呢？

Answer 1

发生这种情况是因为 scrollHeight 将 padding: 5px; 作为增加 textarea 滚动高度的内容

The Element.scrollHeight read-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow.

The scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element's padding, but not its border or margin.

MDN

---

border-box textarea 的高度为 100px，不包括 padding，因此 scrollheight 为 100px。

根据 content-box 的默认行为，content-box textarea 的高度为 100px + 10px，因此 scrollheight 为 110px，每次按下 textarea 时，它的高度都会增加 10px 并更新 scrollheight。

请看下面的片段

$("#message-box").on('keydown', function() {
  console.log("height of teaxtare on keydown is " + $("#message-box").height() + "px");
  var scroll_height = $("#message-box").get(0).scrollHeight;

  console.log("Scroll Height of textarea is " + scroll_height + "px");
  $("#message-box").css('height', scroll_height + 'px');
  console.log("After setting scroll_height as a height of teaxtare, teaxtare's height is " + $("#message-box").height() + "px");
});

#message-box {
  border: 1px solid #cccccc;
  width: 400px;
  min-height: 100px;
  padding: 5px;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<textarea id="message-box"></textarea>

编辑

假设

S = 110px (scrollheight + padding:5px;)

H = 文本区域的高度。

现在你按下键，

Key Event 1,
S = 110px so
H = 110px,
____

Key Event 2,
S = 120 // 110px (which is increased height of textarea by this function ($("#message-box").css('height', scroll_height + 'px');)) + Padding (Which is 10px) 
H = 120px,
 ____

Key Event 3,
S = 130 // 120px (which is increased height of textarea by this function ($("#message-box").css('height', scroll_height + 'px');)) + Padding (Which is 10px) 
H = 130px,

And So On

这种形式有点像循环。