[英]How to get text width and height inside a TextArea in HTML using JavaScript?
[英]How to get the height of the text inside of a textarea
我有一个带有文本Hello World
的textarea
。 我想获得此文本的高度。
我试过使用:
var element = document.getElementById('textarea');
var textHeight = element.innerHTML.offsetHeight;
和:
var textHeight = element.value.offsetHeight;
但是这些并没有给出文本的数字,而是给出了textarea
元素的高度。
element.scrollHeight 可能值得研究。
如果我要解决这个问题(我根本没有测试过),我会将 textarea 的高度设置为 1px 测量滚动高度,然后重置 textarea 的高度。
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
创建一个span元素,设置Span的innerHTML为“Hello World”。
获取跨度的偏移高度。
var span = document.createElement("span");
span.innerHTML="Hello World"; //or whatever string you want.
span.offsetHeight // this is the answer
请注意,您必须将 span 的字体样式设置为 textarea 的字体样式。
您的示例永远不会工作,因为 innerHTML 和 value 都是字符串。 字符串没有定义 offsetWidth。
如果您希望获得 textarea 内选定文本的高度,请使用 selectionStart/selectionEnd 来查找 textarea 的选定文本。
在 jQuery 中没有 scrollHeight,所以它需要一些解决方法。 解决办法是:
var areaheight=$("textarea#element")[0].scrollHeight;
$("#element").height(areaheight);
或更短:
$("#element").height($("#element")[0].scrollHeight)
您可以使用 element.scrollHeight (就像帕特里克回答的那样)但它需要一些更正(我在示例中使用 jQuery):
1) 如果你的 textarea 有填充,你需要减去它(顶部和底部)。
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)
不需要与 textarea 具有相同 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 建议的是获取文本选择并将其放入与 textarea 具有相同字体和宽度的 div 中,该 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
应包含正确的值,以像素为单位。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.