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

Ответ 1

Создайте элемент span, установите Span innerHTML на "Hello World".
Получите смещение spanHeight.

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, чтобы найти выделенный текст текстового поля.

Ответ 2

element.scrollHeight, вероятно, стоит исследовать.

Если бы я подошел к этому (и я вообще не тестировал это), я бы установил высоту textarea на 1px, чтобы измерить высоту прокрутки, а затем reset высоту textarea.

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

Ответ 3

В jQuery нет прокруткиHeight, поэтому ему нужно немного обходного пути. решение будет:

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

или короче:

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

Ответ 4

Вы можете использовать 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.

Ответ 5

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

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

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

Ответ 6

Я не уверен, правильно ли я правильно истолковал ваш вопрос, но мне лично нужно было знать точную высоту каждой строки текста. Свойство 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 должна содержать правильное значение в пикселях.