Question

我试图使用Javascript进行textarea自动增长。逻辑非常简单，这是我的工作代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

一切都很好，但当我删除box-sizing: border-box;属性时，我看到了奇怪的东西。 每次keydown事件时，textarea都会自动添加。

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

在您的JQuery中，您可以使用：

this.style.height = "1px";
this.style.height = (this.scrollHeight) + "px";

请尝试以下方法：

＆＃13;

$("#message-box").on('keydown', function() {
    this.style.height = "1px";
    this.style.height = (this.scrollHeight) + "px"; 
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这种情况正在发生，因为scrollHeight将padding: 5px;作为增加textarea

卷轴高度的内容

Element.scrollHeight只读属性是对的度量   元素内容的高度，包括在内容上不可见的内容   屏幕由于溢出。

scrollHeight值等于元素的最小高度   需要以便在没有的情况下适合视点中的所有内容   使用垂直滚动条。它包含元素的填充，但不包括   它的边界或边缘。

MDN

使用 border-box textarea的高度为100px，不包括padding，因此滚动高度为100px。

内容框 textarea的高度为100px + 10px，默认行为为content-box，因此滚动高度为110px，每个keydown textarea增加它的高度为10px，并且还有更新的滚动高度。

请参阅下面的代码段

＆＃13;

$("#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");
});

＆＃13;

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

＆＃13;

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

＆＃13;

修改

让我们说

S = 110px（scrollheight + padding:5px;）

H = textarea的高度。

现在你按下键，

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

这种形式是一种循环。

Answer 3

在第一次循环迭代中，CSS 高度为 100px，但 scrollHeight 为 110px。这两个是不同的东西。再次在第二次循环迭代中，scrollHeight 为 120px，函数最后一行之前的 CSS 高度为 110px。在最后一行之后，CSS 高度更改为 120px。

this.style.height = (this.scrollHeight) + "px";

scrollHeight 是元素的实际高度。 CSS 高度是带有 border-box 而不是带有 content-box 的真实高度。

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

3 个答案: