Я хочу сделать высоту textarea равной высоте текста в ней (И убрать полосу прокрутки).
HTML
<textarea id="note">SOME TEXT</textarea>
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:
Это с помощью чистого JavaScript код.
в
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;
}
<textarea oninput="auto_grow(this)"></textarea>
в
Для тех из нас достичь этого с углового, я использовал директиву
HTML-код:
<textarea elastic ng-model="someProperty"></textarea>
Яш:
.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);
}
};
}
]);
$тайм-аут
очередей событие, которое будет срабатывать после загрузки DOM, который является то, что's необходимый, чтобы получить право scrollHeight (в противном случае вы'll получить неопределенный
)
Этого можно добиться с помощью JS. Вот 'однострочное' [решение][1] с использованием elastic.js:
$('#note').elastic();
Обновлено: Похоже, что elastic.js больше не существует, но если вы ищете внешнюю библиотеку, я могу порекомендовать autosize.js by 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);
}
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<textarea id="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</textarea>
Посмотрите также похожие темы:
https://stackoverflow.com/questions/7477/autosizing-textarea-using-prototype
https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length
https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize
Я вижу, что на этот вопрос уже есть ответ, но я считаю, что у меня есть простое решение на 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][1]
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][2]
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
<textarea id="wmd-input" name="md-content"></textarea>
Яш
var textarea = $('#wmd-input'),
top = textarea.scrollTop(),
height = textarea.height();
if(top > 0){
textarea.css("height",top + height)
}
УСБ
#wmd-input{
width: 100%;
overflow: hidden;
padding: 10px;
}