如何增加基于文本区域的字体大小的高度

Question

我有一个 textarea，用户将在其中输入一些文本，还有一个输入范围，用户可以在其中增加文本的字体大小，我希望 textarea 的宽度仍然相同，但高度增加取决于字体大小以显示所有文本，而且我希望 textarea 没有滚动和调整大小，我使用 div 做到了这一点，并且我希望使用 textarea 获得相同的结果

我使用 div https://jsfiddle.net/Meline222/fgpedL0z/1/

我想要相同的结果，但使用 textarea https://jsfiddle.net/Meline222/fgpedL0z/3/ bt 当我使用 textarea 时，所有文本都看不到

我试过了，但所有文本都不显示 textarea

这项工作为 div

 #inputText {
            width: 150px;
    height: auto;
    border: 1px solid;
    word-wrap: break-word;
    overflow:hidden;
    resize: none;
    }

Answer 1

如果您只想沿字体大小调整高度，请使用em单位度量。

width: 150px;
height: 2em;

关于em单位的文档说

em: 1em 与当前元素的字体大小相同。

Answer 2

JSFiddle 演示： https ://jsfiddle.net/craigiswayne/qkn8rdxp/20/

 function adjustSize(i){ var o = document.getElementById('inputText'); o.setAttribute("style","height: auto;"); var val = i.value; o.style.fontSize = val + 'px'; var fontSize = o.style.fontSize; o.setAttribute("style","font-size: " + fontSize + "; height: " + o.scrollHeight + "px;"); }

 #inputText { width: 150px; height: auto; border: 1px solid; word-wrap: break-word; }

 <textarea name="" id="inputText">kyb u uuhhhkjh kj</textarea> <input id="input" type="range" min="12" max="72" oninput="adjustSize(this);">

---

所以我选择将textarea的height设置为它的scrollHeight的解决方案

---

scrollHeight由 MDN 文档定义为

scrollHeight 值等于元素需要的最小高度，以便在不使用垂直滚动条的情况下适应视口中的所有内容

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

---

有关scrollHeight 、 clientHeight和offsetHeight的解释， scrollHeight见这篇文章

什么是 offsetHeight、clientHeight、scrollHeight？