根据内容限制TextArea的高度

Question

我正在使用Bootstrap来禁用TextArea的内容：

<td>
  <textarea class="form-control disabled" id="message"></textarea>
</td>

除了我需要根据渲染到控件中的内容控制高度这一事实之外，它的工作正常。

是否有任何HTML 5技巧或CSS技巧可用于根据文本动态调整控件的高度？或者只能使用JScript

来实现

Answer 1

试试这个：

DEMO

HTML：

<textarea id="ta" class="form-control disabled" id="message"></textarea>

CSS：

textarea {

    resize:none;
}

SCRIPT：

$("#ta").keyup(function (e) {
    autoheight(this);
});

function autoheight(a) {
    if (!$(a).prop('scrollTop')) {
        do {
            var b = $(a).prop('scrollHeight');
            var h = $(a).height();
            $(a).height(h - 5);
        }
        while (b && (b != $(a).prop('scrollHeight')));
    };
    $(a).height($(a).prop('scrollHeight') + 20);
}

autoheight($("#ta"));

Answer 2

添加以下css：

textarea.form-control{
   position:absolute;
   height: auto;
}