用于根据内容长度调整大小的文本区域

javascript

2022-08-30 02:25:59

我需要一个文本区域，我可以在框中键入文本，它会根据需要增加长度，以避免处理滚动条，并且在删除文本后需要缩小！我不想走mootools或jquery路线，因为我有一个轻量级的形式。

答案 1

您可以通过设置为并读取属性来检查内容的高度：1pxscrollHeight

function textAreaAdjust(element) {
  element.style.height = "1px";
  element.style.height = (25+element.scrollHeight)+"px";
}

<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>

它可以在Firefox 3，IE 7，Safari，Opera和Chrome下工作。

答案 2

您也可以尝试将属性化到法线或 .不是真的，但它会自动调整大小，而无需脚本。contenteditablepdivtextarea

.divtext {
    border: ridge 2px;
    padding: 5px;
    width: 20em;
    min-height: 5em;
    overflow: auto;
}

<div class="divtext" contentEditable>Hello World</div>