Вырастите высоту @ Html.TextAreaFor в зависимости от объема текста.

Question

Можно ли автоматически увеличить высоту @Html.TextAreaFor в зависимости от объема отображаемого текста?

Вот что я пробовал, но высота не регулируется:

@Html.TextAreaFor(model => model.Description, 5, 30, 
                  htmlAttributes: new { style = "min-width:500px; max-width:100%;min-height:50px;max-height:100%;width:100%;border-style: none " })

Спасибо, SEB

Answer 1

Вы можете использовать JS для автоматического изменения размера текстовой области, например:

var textarea = document.querySelector('textarea');
textarea.addEventListener('keydown', autosize);
function autosize(){
  var el = this;
  setTimeout(function(){
    el.style.cssText = 'height:auto; padding:0';
    el.style.cssText = 'height:' + el.scrollHeight + 'px';
  },0);
}

Этот образец взят по этой ссылке https://codepen.io/vsync/pen/czgrf

Если вы просто хотите отобразить контент, который выможно использовать готовый документ, например:

$(document).ready(function () {
    var textarea = document.querySelector('textarea');
    textarea.style.cssText = 'height:' + textarea.scrollHeight + 'px';
});