Предел 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; 
}