0

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

我希望 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>
4

4 回答 4

0

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

于 2012-05-11T12:00:50.900 回答
0

将 textarea 的内容复制到一个不可见的 div 中，具有相同的宽度和影响大小的样式（字体大小、行高、填充等）。测量所述 div 的高度，并将您的 textarea 设置为相同的高度。

于 2012-05-11T12:10:38.917 回答
0

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

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

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

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

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

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/

于 2012-05-11T12:12:19.287 回答
0

只需对上述代码稍作修改，即可使 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>

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

于 2012-05-11T12:25:03.523 回答