Получите, сколько строк имеет текстовая область

Question

Используя javascript, как узнать, сколько строк имеет текстовая область?в этом примере я должен получить 4 (без чтения rows attr)

<textarea rows="4">Long text here foo bar lorem ipsum Long text here foo bar lorem ipsum Long text here foo bar</textarea>

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

Любая помощь?Спасибо!

Answer 1

Это очень сложная проблема, потому что вы не можете вызвать getBoundingClientRect() в диапазоне внутри элемента <input> или <textarea> (все браузеры возвращают 0 для прямоугольника).См .: Как получить ограничивающий прямоугольник выделенного текста внутри ?

Однако вы можете "клонировать" узел как <div>, скопировать <textarea>Вычислите стиль и текст, и найдите ректы, используя <div>.Вы можете получить высоту всего текста и разделить его на высоту всего одного символа в выделении (высоту строки).

Я должен был сделать это для рабочего проекта, и это былоединственный надежный способ найти геометрическую информацию о тексте внутри элементов <input> и <textarea>.

const clone = document.createElement('div');
const range = document.createRange();
const textarea = document.querySelector('textarea');

let rect = textarea.getBoundingClientRect();
let lineHeight;
let totalHeight;

// "Clone" the textarea and add it into the DOM
clone.style.cssText = window.getComputedStyle(textarea).cssText;
clone.style.left = rect.left + 'px';
clone.style.position = 'absolute';
clone.style.top = rect.top + 'px';
clone.textContent = textarea.value;
document.body.appendChild(clone);

// Determine the number of visible rows
range.setStart(clone.firstChild, 0);
range.setEnd(clone.firstChild, 1);
rect = range.getBoundingClientRect();
lineHeight = rect.height;

range.setEnd(clone.firstChild, clone.textContent.length);
rect = range.getBoundingClientRect();
totalHeight = rect.height;

console.log(totalHeight / lineHeight);

document.body.removeChild(clone);

<textarea rows="4">Long text here foo bar lorem ipsum Long text here foo bar lorem ipsum Long text here foo bar</textarea>