Как получить высоту текста внутри текстовой области - PullRequest
Новая
       8

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

30 голосов
/ 27 июля 2010

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

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

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

и 

var textHeight = element.value.offsetHeight;

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

Ответы [ 6 ]

18 голосов
/ 27 июля 2010

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

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

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

Ваш пример НИКОГДА не будет работать, потому что innerHTML и value являются строками.Строка не определяет offsetWidth.

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

16 голосов
/ 27 июля 2010

element.scrollHeight, вероятно, стоит изучить.

Если бы я собирался приблизиться к этому (а я вообще не проверял это), я бы установил высоту текстовой области на 1 пиксель, измерял высоту прокрутки, а затем сбросил высоту текстовой области.

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

6 голосов
/ 13 марта 2014

В jQuery нет scrollHeight, поэтому требуется небольшой обход.решение будет: 

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

или короче: 

$("#element").height($("#element")[0].scrollHeight)
3 голосов
/ 17 июля 2017

Вы можете использовать element.scrollHeight (точно так же, как ответил Патрик), но он нуждается в некоторых исправлениях (я использую jQuery в примере):

1) если у вашего текстового поля есть отступы, вы должны вычесть его (верх и низ).

2) если элемент уже установил высоту, вам нужно установить его на ноль (только для меры, затем установить его обратно, иначе он возвращает эту высоту + отступ) 

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)

Нет необходимости в дополнительном интервале с тем же CSS, что и у textarea.

0 голосов
/ 30 декабря 2015

Я не уверен, правильно ли я интерпретирую ваш вопрос, но мне лично нужно было знать точную высоту каждой строки текста . Свойство line-height не имеет правильного значения (например, в Safari оно будет округлено до ближайшего значения при фактической печати текста).

Это мой обходной путь. Вы должны иметь следующий код где-то в начале документа. 

// 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;

Переменная inputLineHeight должна содержать правильное значение в пикселях.

0 голосов
/ 27 июля 2010

http://www.quirksmode.org/dom/range_intro.html извините, что больше не могу помочь.

проблема с вашим примером состоит в том, что встроенный текст не имеет высоты, он имеет только высоту строки, для того чтобы иметь высоту, он должен находиться в режиме блока отображения, чтобы все строки добавлялись в блок текста, даже в этом случае все зависит от ширины поля и размера шрифта, семейства шрифтов и т. д.

Что предлагает ItzWarty, так это получить выделенный текст и поместить его в div с тем же шрифтом и шириной, что и у текстовой области, которая имеет блок отображения и позволяет получить его высоту.

...