与textarea自动增长和CSS框大小的奇怪行为

Question

我试图用Javascript做一个textarea自动增长。其中的逻辑是相当简单的，这里是我的工作代码：

$("#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;财产，我看到了奇怪的事情。 随着每个keydown事件textarea自动增益。

textarea autogrowing和box-sizing属性之间的关系是什么？

编辑
在这里看到的演示：

与盒集束性：http://52.90.45.189/aks/textarea-autogrow.html

无箱集束性：http://52.90.45.189/aks/textarea-autogrow-no-border-box.html

我可以理解scrollHeight属性当箱子大小被删除时增加10px。但是，为什么浏览器每按一次键就会增加一个额外的10px ？

Answer 1

发生这种情况，因为scrollHeight采取padding: 5px;的含量增加滚动高度textarea

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

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

MDN

---

随着边界框的textarea的高度100px排除padding所以scrollHeight属性是100px。

随着内容框的textarea的高度100px + 10px为每content-box默认行为，以scrollHeight属性是110px，每个的keydown 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 = 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 2

在你JQuery的，你可以使用：

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

请尝试以下方法：

$("#message-box").on('keydown', function() { 
 
    this.style.height = "1px"; 
 
    this.style.height = (this.scrollHeight) + "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>