如何增加基於文本區域的字體大小的高度

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？