與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>