如何使用 javascript 调整 textarea 的大小？ [关闭]答案

【问题标题】：How to adjust textarea size with javascript? [closed]如何使用 javascript 调整 textarea 的大小？ [关闭]
【发布时间】：2015-10-22 10:16:36
【问题描述】：

如果用户单击按钮，我希望文本框能够展开。我知道我必须使用 onclick 功能。我知道有很多带有自动调整文本框的示例，但我希望用户单击它，它会展开，然后在他们单击按钮以缩小它后保存该数据。

 <textarea rows="8" cols="80" id="queryText" name="query" requried>
</textarea>

【问题讨论】：

那你有什么尝试？
检查这个：jsfiddle.net/Y3rMM 它不会给你答案，但它肯定会帮助你
为什么不使用 jQuery 添加一个修改文本框大小的类？看看 jQuery .focus() 和 .addClass()
@eugensunic 我已经看到了，现在我的代码扩展了，但我想要一个按钮，单击该按钮会使文本框变大以向其中添加更多数据..
将数据保存在哪里以及为什么？缩小文本框不会使其丢失数据。

标签： javascript html css textarea

【解决方案1】：

您可以通过更改cols 和rows 来更改textarea 的大小。如果你想扩大然后缩小到正常大小，你可以将它们定义为：

var textarea = document.getElementById("queryText");

var largeRows = "20";
var largeCols = "100";
var normalRows = textarea.rows; // Or smaller if you want this
var normalCols = textarea.cols; // to shrink more than normal.

您可以使用一个按钮来调整大小，更改它的 value 或 innerHTML 以检测您是在扩大还是缩小：

HTML

<button id="size">+</button>

document.getElementById("size").onclick = function()
{
    if(this.innerHTML == "+") {
        textarea.rows = largeRows;
        textarea.cols = largeCols;
        this.innerHTML = "-"
    } else {
        textarea.rows = normalRows;
        textarea.cols = normalCols;
        this.innerHTML = "+"
    }
}

Here is an example.

我认为您不需要保存数据，因为即使您缩小或隐藏textarea，它也会存在。但是要获得里面的文字，你可以做textarea.value。并将其保存到一个变量或localStorage，这取决于你想要做什么。

【讨论】：