Textarea Высота авто

Я хочу сделать высоту textarea равной высоте текста внутри нее (и удалить полосу прокрутки)

HTML

 

CSS

 textarea#note { width:100%; direction:rtl; display:block; max-width:100%; line-height:1.5; padding:15px 15px 30px; border-radius:3px; border:1px solid #F7E98D; font:13px Tahoma, cursive; transition:box-shadow 0.5s ease; box-shadow:0 4px 6px rgba(0,0,0,0.1); font-smoothing:subpixel-antialiased; background:linear-gradient(#F9EFAF, #F7E98D); background:-o-linear-gradient(#F9EFAF, #F7E98D); background:-ms-linear-gradient(#F9EFAF, #F7E98D); background:-moz-linear-gradient(#F9EFAF, #F7E98D); background:-webkit-linear-gradient(#F9EFAF, #F7E98D); } 

JsFiddle: http://jsfiddle.net/Tw9Rj/

Solutions Collecting From Web of "Textarea Высота авто"

Это может быть достигнуто с использованием JS. Вот однолинейное решение с использованием elastic.js :

 $('#note').elastic(); 

Обновлено: похоже, что у него нет эластичности.js, но если вы ищете внешнюю библиотеку, я могу порекомендовать autosize.js от Jack Moore . Это рабочий пример:

 autosize(document.getElementById("note")); 
 textarea#note { width:100%; box-sizing:border-box; direction:rtl; display:block; max-width:100%; line-height:1.5; padding:15px 15px 30px; border-radius:3px; border:1px solid #F7E98D; font:13px Tahoma, cursive; transition:box-shadow 0.5s ease; box-shadow:0 4px 6px rgba(0,0,0,0.1); font-smoothing:subpixel-antialiased; background:linear-gradient(#F9EFAF, #F7E98D); background:-o-linear-gradient(#F9EFAF, #F7E98D); background:-ms-linear-gradient(#F9EFAF, #F7E98D); background:-moz-linear-gradient(#F9EFAF, #F7E98D); background:-webkit-linear-gradient(#F9EFAF, #F7E98D); } 
   

Это использование Pure JavaScript Code.

 function auto_grow(element) { element.style.height = "5px"; element.style.height = (element.scrollHeight)+"px"; } 
 textarea { resize: none; overflow: hidden; min-height: 50px; max-height: 100px; } 
  

Для тех из нас, кто выполнил это с помощью Angular, я использовал директиву

HTML:

  

JS:

 .directive('elastic', [ '$timeout', function($timeout) { return { restrict: 'A', link: function($scope, element) { $scope.initialHeight = $scope.initialHeight || element[0].style.height; var resize = function() { element[0].style.height = $scope.initialHeight; element[0].style.height = "" + element[0].scrollHeight + "px"; }; element.on("input change", resize); $timeout(resize, 0); } }; } ]); - .directive('elastic', [ '$timeout', function($timeout) { return { restrict: 'A', link: function($scope, element) { $scope.initialHeight = $scope.initialHeight || element[0].style.height; var resize = function() { element[0].style.height = $scope.initialHeight; element[0].style.height = "" + element[0].scrollHeight + "px"; }; element.on("input change", resize); $timeout(resize, 0); } }; } ]); 

$timeout ставит в очередь событие, которое будет срабатывать после загрузки DOM, что необходимо для получения правильного scrollHeight (в противном случае вы получите undefined )

Я использовал jQuery AutoSize . Когда я пытался использовать Elastic, он часто давал мне поддельные высоты (действительно высокие текстовые поля). jQuery AutoSize хорошо работает и не имеет этой проблемы.

Я вижу, что на это уже ответили, но я считаю, что у меня есть простое решение jQuery (jQuery даже не нужен, мне просто нравится использовать его):

Я предлагаю подсчитать разрывы строк в тексте textarea и соответственно установить атрибут rows textarea поля.

 var text = jQuery('#your_textarea').val(), // look for any "\n" occurences matches = text.match(/\n/g), breaks = matches ? matches.length : 2; jQuery('#your_textarea').attr('rows',breaks + 2); 

Jsfiddle

 textarea#note { width:100%; direction:rtl; display:block; max-width:100%; line-height:1.5; padding:15px 15px 30px; border-radius:3px; border:1px solid #F7E98D; font:13px Tahoma, cursive; transition:box-shadow 0.5s ease; box-shadow:0 4px 6px rgba(0,0,0,0.1); font-smoothing:subpixel-antialiased; background:-o-linear-gradient(#F9EFAF, #F7E98D); background:-ms-linear-gradient(#F9EFAF, #F7E98D); background:-moz-linear-gradient(#F9EFAF, #F7E98D); background:-webkit-linear-gradient(#F9EFAF, #F7E98D); background:linear-gradient(#F9EFAF, #F7E98D); height:100%; } html{ height:100%; } body{ height:100%; } 

или javascript

 var s_height = document.getElementById('note').scrollHeight; document.getElementById('note').setAttribute('style','height:'+s_height+'px'); 

Jsfiddle

 var minRows = 5; var maxRows = 26; function ResizeTextarea(id) { var t = document.getElementById(id); if (t.scrollTop == 0) t.scrollTop=1; while (t.scrollTop == 0) { if (t.rows > minRows) t.rows--; else break; t.scrollTop = 1; if (t.rows < maxRows) t.style.overflowY = "hidden"; if (t.scrollTop > 0) { t.rows++; break; } } while(t.scrollTop > 0) { if (t.rows < maxRows) { t.rows++; if (t.scrollTop == 0) t.scrollTop=1; } else { t.style.overflowY = "auto"; break; } } } 

HTML

  

JS

 var textarea = $('#wmd-input'), top = textarea.scrollTop(), height = textarea.height(); if(top > 0){ textarea.css("height",top + height) } 

CSS

 #wmd-input{ width: 100%; overflow: hidden; padding: 10px; }