Html 文本区域自动高度

Textarea Auto height

提问by Mohammad Mahdi Naderi

I want to make height of textarea equal to height of the text within it (And remove the scroll bar)

我想让 textarea 的高度等于其中文本的高度（并删除滚动条）

HTML

HTML

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

CSS

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/

JsFiddle：http: //jsfiddle.net/Tw9Rj/

采纳答案by Mike

It can be achieved using JS. Here is a 'one-line' solutionusing elastic.js:

可以使用JS来实现。这是使用elastic.js的“单行”解决方案：

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

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

Updated: Seems like elastic.js is not there anymore, but if you are looking for an external library, I can recommend autosize.js by Hyman Moore. This is the working example:

更新：似乎 elastic.js 不再存在，但如果您正在寻找外部库，我可以推荐Hyman Moore 的autosize.js 。这是工作示例：

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/Hymanmoore/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>

Check this similar topics too:

也检查这个类似的主题：

Autosizing textarea using Prototype

使用 Prototype 自动调整 textarea 的大小

Textarea to resize based on content length

根据内容长度调整大小的文本区域

Creating a textarea with auto-resize

创建具有自动调整大小的文本区域

回答by Moussawi7

This using Pure JavaScript Code.

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

回答by blockloop

For those of us accomplishing this with Angular JS, I used a directive

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

HTML:

HTML：

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

JS:

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

$timeoutqueues an event that will fire after the DOM loads, which is what's necessary to get the right scrollHeight (otherwise you'll get undefined)

$timeout将在 DOM 加载后触发的事件排队，这是获得正确 scrollHeight 所必需的（否则你会得到undefined）

回答by Peter

I used jQuery AutoSize. When I tried using Elastic it frequently gave me bogus heights (really tall textarea's). jQuery AutoSize has worked well and hasn't had this issue.

我使用了jQuery AutoSize。当我尝试使用 Elastic 时，它经常给我虚假的高度（非常高的 textarea）。jQuery AutoSize 运行良好，没有出现此问题。

回答by Douglas.Sesar

I see that this is answered already, but I believe I have a simple jQuery solution ( jQuery is not even really needed; I just enjoy using it ):

我看到这已经得到了回答，但我相信我有一个简单的 jQuery 解决方案（甚至不需要 jQuery；我只是喜欢使用它）：

I suggest counting the line breaks in the textareatext and setting the rowsattribute of the textareaaccordingly.

我建议计算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);

回答by Pumpkinpro

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

or javascript

或者 javascript

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

Jsfiddle

提琴手

回答by user3530437

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

回答by emitle

html

html

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

js

js

var textarea = $('#wmd-input'),
    top = textarea.scrollTop(),
    height = textarea.height();
    if(top > 0){
       textarea.css("height",top + height)
    }

css

css

#wmd-input{
    width: 100%;
    overflow: hidden;
    padding: 10px;
}