文本区域自动高度

javascript html css

2022-08-30 01:02:01

我想使文本区域的高度等于其中文本的高度（并删除滚动条）

断续器

<textarea id="note">SOME TEXT</textarea>

断续器

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/

答案 1

这使用纯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>

答案 2

对于我们这些使用Angular JS完成这项工作的人，我使用了一个指令

网页：

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

文本区域 自动高度

文本区域自动高度