根据内容限制 TextArea 的高度 [英] Limit height of TextArea based on content

问题描述

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

I'm using Bootstrap, to disable the contents of a TextArea as such:

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

除了我还需要根据呈现到控件中的内容来控制高度之外，它工作正常.

which works fine, apart from the fact that I need to control the height as well, based on the content being rendered into the control.

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

Are there any HTML 5 tricks, or CSS tricks I can use to dynamically resize the height of the control based upon the text? Or can this only be achieved using JScript

推荐答案

试试这个:

HTML:

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

CSS:

textarea {

    resize:none;
}

脚本:

$("#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"));

这篇关于根据内容限制 TextArea 的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！