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

Element.scrollHeight ist es wahrscheinlich wert, untersucht zu werden.

Wenn ich dies angehen würde (und ich habe dies nicht getestet), würde ich die Höhe der Textarea auf 1px die Scroll-Höhe messen und dann die Höhe der Textarea zurücksetzen.

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

Answer 2

Erstellen Sie ein span-Element, setzen Sie das innerHTML von Span auf "Hello World".
Ermittelt die OffsetHöhe des Bereichs.

var span = document.createElement("span");
span.innerHTML="Hello World"; //or whatever string you want.
span.offsetHeight // this is the answer

Beachten Sie, dass Sie die Schriftart des Bereichs auf die Schriftart des Textbereichs einstellen müssen.

Ihr Beispiel wird NIE funktionieren, da sowohl innerHTML als auch value Zeichenketten sind. String definiert nicht offsetWidth.

Wenn Sie die Höhe des markierten Textes in einem Textbereich ermitteln möchten, verwenden Sie selectionStart/selectionEnd, um den markierten Text des Textbereichs zu finden.

Answer 3

In jQuery gibt es keine scrollHeight, so dass es ein wenig Workaround braucht. die Lösung wäre:

var areaheight=$("textarea#element")[0].scrollHeight;
$("#element").height(areaheight);

oder kürzer:

$("#element").height($("#element")[0].scrollHeight)

Answer 4

Sie können element.scrollHeight verwenden (genau wie Patrick geantwortet hat), aber es bedarf einiger Korrekturen (ich verwende jQuery im Beispiel):

1) Wenn Ihre Textarea Polsterung hat, müssen Sie es subtrahieren (oben und unten).

2) wenn das Element bereits die Höhe eingestellt hat, müssen Sie es auf Null setzen (nur um zu messen, dann setzen Sie es zurück, sonst gibt es diese Höhe + Padding zurück)

var h0 = $(element).height();  // backup height
$(this).height(0); 
var h = $(this).get(0).scrollHeight - $(this).css('paddingTop').replace('px','')*1 - $(this).css('paddingBottom').replace('px','')*1; // actual text height
$(this).height(h0); // set back original height (or new height using h)

Es besteht keine Notwendigkeit für ein zusätzliches Feld mit demselben CSS wie für Textarea.

Answer 5

Für alle, die React:

const textarea_ref = useRef(null);
const [idealHeight,setIdealHeight] = useState(0);
const [inputValue,setInputValue] = useState("");

useLayoutEffect(() => {                                           // useLayoutEffect TO AVOID FLICKERING
    textarea_ref.current.style.height = '0px';                    // NEEDS TO SET HEIGHT TO ZERO
    const scrollHeight = textarea_ref.current.scrollHeight;       // TO READ THE CORRECT SCROLL HEIGHT WHEN IT SHRINKS
    textarea_ref.current.removeAttribute('style');                // REMOVE INLINE STYLE THAT WAS ADDED WITH 0px
    setIdealHeight(scrollHeight + 2);                             // NEEDS TO ADD 2. I THINK IT'S BECAUSE OF THE BORDER
  },[inputValue]);

return (
  <textarea
    // USE idealHeight STATE TO SET THE HEIGHT
    value={inputValue}
    onChange={onChange}
    ref={textarea_ref}
  />
);

PS: Manchmal flackert es noch. Zumindest in Chrome.