Question

我在表单上有一个textarea，其中填充了数据库查询中的文本，可供有人编辑。

我希望textarea能够在不需要滚动的情况下显示整个内容，但是当只有少量文本时，不想放置大的文本区域。

文字可以是5到300个字符。

我已经看到了这类问题的解决方案，但只有textarea在onkeyup上增长，如下所示。

<script>
function textAreaAdjust(o) {
o.style.height = "1px";
o.style.height = (25+o.scrollHeight)+"px";
}
</script>
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>

Answer 1

您可以在页面加载时调用该方法。

Answer 2

将textarea的内容复制到具有相同宽度的不可见div和影响大小的样式（font-size，line-height，padding等）。测量所述div的高度，并将textarea设置为相同的高度。

Answer 3

首先，请勿使用onkeyup。它不适合检测文本输入。

我使用以下代码调整textarea的大小，以不断调整textarea元素的大小以适应内容：

var tarea = document.getElementsByTagName("textarea")[0];

tarea.oninput = function () {
    tarea.style.height = tarea.scrollHeight + "px";
}

但是，旧版本的IE不支持oninput，因此如果您需要在IE 8及更低版本中使用它，则需要添加onpropertychange：

var tarea = document.getElementsByTagName("textarea")[0];

tarea.oninput = tarea.onpropertychange = function (evt) {
    evt = evt || window.evt;
    if (evt.type == "propertychange" && evt.propertyName != "value")
        return;

    tarea.style.height = tarea.scrollHeight + "px";
}

工作演示：http://jsfiddle.net/D5e8t/

Answer 4

只需对上述代码进行少量修改即可使textarea自动调整。只需执行以下步骤

1）在您的文字区域添加ID

<textarea onkeyup="textAreaAdjust(this)" id="txt" runat="server" style="overflow:hidden"></textarea>

2）在关闭bode标签之前添加javascript代码以调用testAreaAdjust块

<script type="text/javascript">
textAreaAdjust(document.getElementById('txt'));
</script>

这将自动调整文本框的大小。希望这会对你有所帮助

textarea是否可以根据输入的内容确定大小

4 个答案: