我使用jQuery AutoSize。当我尝试使用弹性时，它经常给我虚假的高度(真的很高的文本区域)。jQuery AutoSize工作得很好，没有这个问题。

这使用纯JavaScript代码。

函数auto_grow(element) { Element.style.height = "5px"; element.style.height = (element.scrollHeight)+"px"; ｝ textarea { 调整:没有; 溢出:隐藏; 最小高度:50 px; max-height: 100 px; ｝ < textarea oninput = " auto_grow(这)" > < / >文本区域

对于那些用Angular JS完成这个任务的人，我使用了一个指令

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将一个事件排队，该事件将在DOM加载后触发，这是获得正确的scrollHeight所必需的(否则您将得到undefined)

杰斯菲德尔

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

杰斯菲德尔

我看到这个问题已经得到了回答，但我相信我有一个简单的jQuery解决方案(jQuery甚至不是真的需要;我只是喜欢使用它):

我建议计算文本区域文本中的换行符，并相应地设置文本区域的行属性。

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

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