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

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

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

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

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

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

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

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

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

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

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

или короче:

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

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

Вы можете получить высоту текста, получив высоту полосы прокрутки текстового поля

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

console.log({ height });

Для всех, кто использует 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: Иногда все еще мерцает. По крайней мере, в Chrome.

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

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

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

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