Question

我有一个文本区域，用户可以在其中输入一些文本，也有一个输入范围，用户可以在其中增加文本的字体大小，我希望文本区域的宽度保持不变，但高度的增加取决于字体大小来显示所有文本，我也希望textarea没有滚动和调整大小我是使用div完成的，我想要使用textarea获得相同的结果

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

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

我尝试过但所有文本都没有显示文本区域

这项功能适用于div

fun Int.toByteArray() = byteArrayOf(
    this.toByte(),
    (this ushr 8).toByte(),
    (this ushr 16).toByte(),
    (this ushr 24).toByte()
)

val timeUTC = (System.currentTimeMillis() / 1000).toInt().toByteArray()

Answer 1

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

width: 150px;
height: 2em;

Documentation关于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);">

因此，我选择将height的{{1}}设置为textarea

的解决方案

scrollHeight由MDN文档定义为

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

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

另请参阅此帖子，以获取对scrollHeight，scrollHeight和clientHeight的解释

What is offsetHeight, clientHeight, scrollHeight?

如何增加基于textarea的字体大小的高度

2 个答案: