代码之家 › 专栏 › 技术社区 › significance

有没有一种方法可以让文本区域在不使用PHP或JavaScript的情况下进行拉伸以适应其内容?

css html

significance · 技术社区 · 14 年前

我在一个文本区域中填充要用户编辑的内容。

是否可以使其具有伸缩性以适合CSS(如 overflow:show 对于DIV)?

4 回复 | 直到 14 年前

Community SushiHangover 7 年前

不是真的。这通常是使用JavaScript完成的。

这里有一个很好的讨论方法…

Autosizing textarea using Prototype

Martin Prestone 6 年前

只有一行

<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>

Chris Dutrow 9 年前

下面是一个与jquery一起使用的函数(仅用于高度,而不是宽度):

function setHeight(jq_in){
    jq_in.each(function(index, elem){
        // This line will work with pure Javascript (taken from NicB's answer):
        elem.style.height = elem.scrollHeight+'px'; 
    });
}
setHeight($('<put selector here>'));

注: OP要求一个不使用JavaScript的解决方案,但是这对许多遇到这个问题的人来说应该是有帮助的。

NicB 9 年前

这是一个非常简单的解决方案,但它对我很有用:

<!--TEXT-AREA-->
<textarea id="textBox1" name="content" TextMode="MultiLine" onkeyup="setHeight('textBox1');" onkeydown="setHeight('textBox1');">Hello World</textarea>

<!--JAVASCRIPT-->
<script type="text/javascript">
function setHeight(fieldId){
    document.getElementById(fieldId).style.height = document.getElementById(fieldId).scrollHeight+'px';
}
setHeight('textBox1');
</script>