Как получить высоту текста внутри текстового поля

Question

У меня есть textarea с текстом Hello World. Я хотел бы получить высоту этого текста.

Я пытался использовать:

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

и:

var textHeight = element.value.offsetHeight; 

Но они не дают число текста, но высоту textarea элемента.

Answer 1

Создайте элемент span, установите Span's innerHTML в «Hello World».
Получите смещение диапазона span.

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

Обратите внимание, что вы должны установить стиль шрифта span в стиль шрифта textarea.

Ваш пример никогда не будет работать, потому что innerHTML и значение являются строками. Строка не определяет offsetWidth.

Если вы хотите получить высоту выделенного текста внутри текстового поля, используйте selectStart/selectionEnd, чтобы найти выделенный текст текстового поля.