Question

使用javascript如何获取textarea的行数？在此示例中，我应该得到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

这是一个非常棘手的问题，因为您不能在<input>或<textarea>元素内的范围内调用getBoundingClientRect()（所有浏览器的rect返回0）。参见：How to get the bounding rect of selected text inside an <input>?

不过，您可以将节点“克隆”为<div>，复制<textarea>的计算样式和文本，然后使用<div>查找rect。您可以获取所有文本的高度，然后将其除以所选内容中一个字符的高度（行高）。

我必须在一个工作项目中执行此操作，这是在<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>

获取文本区域有多少行

1 个答案: