这使用纯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(这)" > < / >文本区域

我使用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(这)" > < / >文本区域

杰斯菲德尔

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

杰斯菲德尔

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

对于那些用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)