温馨提示×

动态调整textarea的宽度和高度以包含文本

小云
322
2023-09-26 04:56:27
栏目: 编程语言
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

要动态调整textarea的宽度和高度以包含文本,你可以通过JavaScript来实现。下面是一个示例代码:

<textarea id="myTextarea" oninput="adjustTextareaHeight(this)"></textarea>

<script>

function adjustTextareaHeight(textarea{

  // 重置textarea的高度

  textarea.style.height = 'auto';

  

  // 调整到适合文本内容的高度

  textarea.style.height = textarea.scrollHeight + 'px';

}

// 在页面加载完成后调用一次,以确保初始文本也能正确显示

window.onload = function() {

  var textarea = document.getElementById('myTextarea');

  adjustTextareaHeight(textarea);

};

</script>

上述代码中,我们绑定了textarea的oninput事件,这样在用户输入文本时会触发adjustTextareaHeight函数。该函数会重置textarea的高度为默认值,并根据文本内容的高度来调整高度。

此外,在页面加载完成后,我们还调用了adjustTextareaHeight函数来确保初始文本也能正确显示。你可以将myTextarea替换为你自己的textarea的id。

通过这种方式,textarea的高度会根据文本内容进行自适应调整,从而完整显示所有文本。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:如何确定TextArea中文本的行数和宽度

0