如何使用 javascript 调整文本区域大小？

Question

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

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

Answer 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>

JS

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，具体取决于您要执行的操作。

如何使用 javascript 调整文本区域大小？

How to adjust textarea size with javascript?

html

javascript

css

textarea