textarea根据内容js或jquery设置高度

Question

这是我的代码:(保持简单)

<textarea style="height:100px;">
    $textareatext
</textarea>

• 如果$textareatext是1行长我想要textarea的高度适合
• 如果它的3,5或10行......同样的事情.

我遇到的问题是100px高度太大,但如果我设置它20px并且有10行,则textarea高度太小.注意:值是通过mysql预加载的.所以我认为应该计算线数,然后根据线数设置高度？有什么建议？

我使用Javascript和jQuery,或者你建议的任何东西.

谢谢.

Answer 1

这可能有所帮助.它们都是jQuery插件.

• jQuery弹性
• 灵活的区域
• 自动增长

编辑

var $textArea = $("#textarea-container");

resizeTextArea($textArea);

$textArea.off("keyup.textarea").on("keyup.textarea", function() {
    resizeTextArea($(this));
});

function resizeTextArea($element) {
    $element.height($element[0].scrollHeight);
}?

这个答案由下面的FrançoisWahl提供.

Answer 2

删除硬编码的高度并给出textarea一个id:

<textarea id="textarea-container">
    Line 1
    Line 2
    Line 3
    Line 4
</textarea>?

使用jQuery,您可以使用以下内容在页面加载时自动调整大小,然后使用keuUp前面提到的事件.

var $textArea = $("#textarea-container");

// Re-size to fit initial content as it is pre-loaded.
resizeTextArea($textArea);

// Remove this binding if you don't want to re-size on typing.
$textArea.off("keyup.textarea").on("keyup.textarea", function() {
    resizeTextArea($(this));
});

function resizeTextArea($element) {
    $element.height($element[0].scrollHeight);
}?

见DEMO

或者,如果您只关心显示它并删除默认行填充,请使用以下命令:

var $textArea = $("#textarea-container");
var nativeRowPadding = 15;

// Re-size to fit initial content.
resizeTextArea($textArea);

function resizeTextArea($element) {
    $element.height($element[0].scrollHeight-nativeRowPadding );
}?

见DEMO

Answer 3

要确保您的所有 textarea 跟上它们的内容，在您键入时增加或减少高度，请使用以下内容：

$("textarea").on("input",function(){
   $(this).height("auto").height($(this)[0].scrollHeight);
}

在 SO 本身上安装这行代码实际上会很有帮助:)