Seltsames Verhalten mit TextArea Autogrow und CSS-Box-Sizing

Question

Ich versuche, eine TextArea mit Javascript Autogrow. Die Logik ist ziemlich einfach, und hier ist mein Arbeitscode:

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

Alles funktioniert gut, aber wenn ich die box-sizing: border-box; Eigenschaft entfernen, ich sehe seltsame Dinge. Mit jedem Keydown-Ereignis wird die Textfläche automatisch.

Was ist die Beziehung zwischen TextArea Autogrowing und der box-sizing Eigenschaft?

EDIT
die Demos hier ansehen:

Mit dem kasten Leimungseigenschaft: http://52.90.45.189/aks/textarea-autogrow.html

Ohne die kasten Leimungseigenschaft: http://52.90.45.189/aks/textarea-autogrow-no-border-box.html

Ich kann verstehen, dass Scrollheight Erhöht sich um 10px, wenn die Box-Sizing entfernt wird. Aber warum fügt der Browser jedes Mal, wenn eine Taste gedrückt wird, ein zusätzliches 10px jedesmal hinzu?

Answer 1

Dies geschieht, weil scrollHeightpadding: 5px; als Inhalt unter die zunimmt Scrollhöhe von textarea

Die Element.scrollHeight schreibgeschützte Eigenschaft eine Messung der von dem Inhalt eines Elements Höhe ist, einschließlich Inhalts nicht sichtbar auf dem Bildschirm durch Überlauf.

Der scrollHeight-Wert entspricht der minimalen Höhe, die das Element benötigen würde, um den gesamten Inhalt im Ansichtspunkt ohne mithilfe einer vertikalen Bildlaufleiste anzupassen. Es enthält das Padding des Elements, aber nicht seinen Rand oder Rand.

MDN

---

Mit Grenz Boxhöhe TextArea- der ist 100px ohne padding so Scrollheight 100px ist.

Mit content-Box Höhe TextArea- der ist 100px + 10px als pro Standardverhalten von content-box so Scrollheight 110px ist, mit jeder keydown TextArea- erhöht es Höhe ist von 10px und aktualisiert Scrollheight auch.

Siehe Snippet

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

EDIT

Lassen Sie sagen

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

H = Höhe der Textfläche.

Jetzt drückt man Taste,

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 

Diese Formation ist eine Art Schleife.

Answer 2

In Ihrem JQuery können Sie verwenden:

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

Bitte versuchen Sie folgendes:

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