Textarea Auto chiều cao

Question

Tôi muốn làm cho chiều cao của textarea bằng chiều cao của văn bản bên trong nó (Và loại bỏ các thanh cuộn)

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: http://jsfiddle.net/Tw9Rj/

Answer 1

Có thể đạt được bằng cách sử dụng JS. Đây là một 'một dòng' solution sử dụng elastic.js:

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

Cập nhật: Có vẻ như elastic.js là không còn ở đó nữa, nhưng nếu bạn đang tìm kiếm một thư viện bên ngoài, tôi có thể giới thiệu autosize.js by Jack Moore . Đây là ví dụ làm việc:

autosize(document.getElementById("note"));

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

Kiểm tra này chủ đề tương tự quá:

Autosizing textarea using Prototype

Textarea to resize based on content length

Creating a textarea with auto-resize

Answer 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%;  
} 

hoặc javascript

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

Jsfiddle

Answer 3

tôi thấy rằng đây là trả lời đã có, nhưng tôi tin rằng tôi có một giải pháp đơn giản jQuery (jQuery là thậm chí không thực sự cần thiết; Tôi chỉ thích sử dụng nó):

Tôi đề nghị đếm ngắt dòng trong văn bản textarea và đặt thuộc tính rows của textarea tương ứng.

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); 

Answer 4

html

<textarea id="wmd-input" name="md-content"></textarea> 

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; 
} 

Answer 5

Tôi đã sử dụng jQuery AutoSize. Khi tôi cố gắng sử dụng đàn hồi nó thường xuyên cho tôi chiều cao không có thật (thực sự cao của textarea). jQuery AutoSize đã hoạt động tốt và chưa gặp sự cố này.

Answer 6

Đối với những người trong chúng ta thực hiện điều này với góc, tôi sử dụng một chỉ thị

HTML:

<textarea elastic ng-model="someProperty"></textarea> 

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); 
      } 
     }; 
    } 
]); 

$timeout hàng đợi một sự kiện mà sẽ cháy sau khi tải DOM, điều cần thiết để có được cuộn phù hợp Chiều cao (nếu không bạn sẽ nhận được undefined)

Answer 7

Điều này sử dụng Mã JavaScript thuần túy.

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 onkeyup="auto_grow(this)"></textarea>

Answer 8

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; 
     } 
    } 
}