Javascript 如何获取文本区域内文本的高度

我有一个

textarea

和文本

helloworld

。我想知道这篇文章的高度

我尝试使用：

var element = document.getElementById('textarea');
var textHeight = element.innerHTML.offsetHeight;

以及：

---

但是这些并没有给出文本的编号，而是给出

textarea

元素的高度。

创建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

如果要获取文本区域内所选文本的高度，请使用selectionStart/selectionEnd查找文本区域内所选文本。

对不起，我帮不上什么忙了

示例中的问题是，内联文本没有高度，只有行高，要使其具有高度，需要在显示块模式下，以便将所有行添加到文本块中，即使如此，这一切都取决于框的宽度、字体大小、字体系列等

---

ItzWarty建议获得文本选择并将其放入一个div中，该div的字体和宽度与textarea相同，textarea具有显示块并允许您获取其高度。

元素。scrollHeight可能值得研究

如果我打算这样做（我根本没有测试过），我会将textarea的高度设置为1px测量滚动高度，然后重置textarea的高度

---

在jQuery中没有滚动高度，因此需要一些变通方法。解决办法是：

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

或更短：

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

---

我不确定我是否正确地解释了你的问题，但我个人需要知道每行文本的确切高度。

行高

属性没有正确的值（例如，在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

应该包含正确的值，以像素为单位。

您可以使用element.scrollHeight（就像Patrick回答的那样），但它需要一些更正（我在示例中使用jQuery）：

1） 如果文本区域有填充，则需要将其减去（顶部和底部）

2） 若元素已经设置了高度，则需要将其设置为零（仅用于测量，然后将其设置回原位，否则返回此高度+填充）

---

使用与textarea相同的css不需要额外的跨度。

对于任何使用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}
  />
);

const textarea\u ref=useRef（空）；
const[idealHeight，setIdealHeight]=useState（0）；
常量[inputValue，setInputValue]=useState（“”）；
useLayoutEffect（（）=>{//useLayoutEffect以避免闪烁
textarea_ref.current.style.height='0px'；//需要将高度设置为零
const scrollHeight=textarea\u ref.current.scrollHeight；//在收缩时读取正确的滚动高度
textarea_ref.current.removeAttribute（'style'）；//删除与0px一起添加的内联样式
setIdealHeight（scrollHeight+2）；//需要添加2。我认为这是因为边框
}，[inputValue]）；
返回(
);

---

附言：它有时还会闪烁。至少在Chrome中。

您可以通过获取textarea滚动条高度来获取文本高度

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

console.log({ height });

---

啊哈，所以我应该在

中创建一个

，对吗？不。跨度根本不需要附加到文档中。在执行上述代码后，将对其进行处理。我还应该注意，代码使用top/bot填充给出了文本的高度，与span/div/which一样。如果你不想要这种填充，可以使用CSS。啊哈：我想我已经找到了。让我试试。我不知道：|，不是我。需要在offsetHeight为我返回任何内容之前将跨度附加到文档中。我想你需要在与textarea样式相同的地方添加它，但是你不知道什么css专门应用于textarea，所以我不知道这个解决方案是如何工作的？只是测试了这个，它解决了我在scrollHeight中遇到的一个问题，给出了奇怪的值（每次在IE11上输入/删除字符时，滚动高度都会增加）。通过先将文本区域的高度设置为1px，它为我提供了所需的文本高度。这很好，但当文本区域或其父对象的某些设置为

display:none

时不起作用。我不明白为什么StackOverflow允许人们不加评论地向下投票……当我遇到与OP相同的问题时，我发现了这个问题我想出了一个jQuery解决方案，它很有效，我今天仍然使用它，并决定将它作为一个答案发布，以备其他人需要。这是一个问题的明确答案，带有代码示例和解释…我没有得到反对票？！我不知道这是否是原因，但当我使用此代码更新我的文本区域a的高度时输入后，它总是会增加大约15px的高度。如果我删除一行，它仍然会扩大文本区域。这不是为了动态目的。如果你想让它工作，请将高度动态重置为自动，然后读取滚动高度并设置为该高度。我不知道为什么其他答案都错了！被选中并被投票。这是唯一的答案我找到了正确的答案，这真的很有效。谢谢！这应该是公认的答案。如果你在一个页面中有1000个文本区域，你真的不想在客户端上创建太多的负载创建跨距，应用css，所有这些都只是为了获得文本高度并销毁跨距。或者，你不能使用文本区域，而只是创建一个完整的css文本但是，对于textareas，这个解决方案工作得很好，它随着输入而增长和收缩，即使页面加载了预填充的文本（与我能够使用的大多数其他解决方案不同）

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}
  />
);

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

console.log({ height });