Wie erhalte ich die Höhe des Textes in einem Textbereich?

Question

Ich habe eine textarea mit dem Text Hello World . Ich würde gerne die Höhe dieses Textes ermitteln.

Ich habe versucht, sie zu benutzen:

var element = document.getElementById('textarea');
var textHeight = element.innerHTML.offsetHeight;

und:

var textHeight = element.value.offsetHeight;

Diese geben aber nicht die Zahlen des Textes an, sondern die Höhe des textarea Element.

Answer 1

Sie können die Texthöhe ermitteln, indem Sie die Höhe der Bildlaufleiste des Textbereichs ermitteln

const textarea = document.getElementByTagName("textarea");
const height = textarea.scrollHeight;

console.log({ height });

Answer 2

http://www.quirksmode.org/dom/range_intro.html Es tut mir leid, dass ich Ihnen nicht weiterhelfen kann.

Das Problem bei deinem Beispiel ist, dass Inline-Text keine Höhe hat, sondern nur eine Zeilenhöhe. Damit er eine Höhe hat, muss er im Blockmodus angezeigt werden, so dass alle Zeilen zu einem Textblock hinzugefügt werden, und selbst dann hängt alles von der Breite des Feldes und der Schriftgröße, Schriftart usw. ab.

was ItzWarty vorschlägt, ist immer die Textauswahl und setzen es in einem div, die die gleiche Schriftart und Breite wie die Textarea, die Display-Block hat und ermöglicht es Ihnen, seine Höhe zu erhalten hat.

Answer 3

Ich bin mir nicht sicher, ob ich Ihre Frage richtig interpretiere, aber ich persönlich wollte wissen, welche genaue Höhe jeder Textzeile . Die line-height Eigenschaft nicht den richtigen Wert hat (z. B. wird sie in Safari beim Drucken von Text auf den nächstliegenden Wert gerundet).

Dies ist meine Abhilfe. Sie sollten den folgenden Code irgendwo am Anfang des Dokuments haben.

// set one row in the textarea and get its height
element.rows = 1;
var height1 = parseFloat(window.getComputedStyle(element)["height"]);
// set two rows in the textarea and get its height
element.rows = 2;
var height2 = parseFloat(window.getComputedStyle(element)["height"]);
// Now, the line height should be the difference
var inputLineHeight = height2-height1;

Die Variable inputLineHeight sollte den richtigen Wert in Pixel enthalten.