Javascript 文本区域自动高度

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

HTML

jsiddle:

可以使用JS实现。下面是一个“一行”，使用：

更新：似乎elastic.js已经不存在了，但如果您正在寻找外部库，我可以推荐。这是一个工作示例：

autosize（document.getElementById（“note”）
textarea#注意{
宽度：100%；
框大小：边框框；
方向：rtl；
显示：块；
最大宽度：100%；
线高：1.5；
填充：15px 15px 30px；
边界半径：3px；
边框：1px实心#F7E98D；
字体：13px大马，草书；
过渡：盒影0.5s缓；
盒影：0.4px 6px rgba（0,0,0,0.1）；
字体平滑：亚像素抗锯齿；
背景：线性梯度（#F9EFAF，#F7E98D）；
背景：-o-线性梯度（#F9EFAF，#F7E98D）；
背景：-ms线性梯度（#F9EFAF，#F7E98D）；
背景：-莫兹线性梯度（#F9EFAF，#F7E98D）；
背景：-webkit线性梯度（#F9EFAF，#F7E98D）；
}

这是一位杰出的领袖，他是一位伟大的领袖。但是，在最低限度的利益下，我们必须在公共消费品的基础上，继续履行我们的义务。在亨德雷特的两个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里

或
javascript

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

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

我建议计算
textarea
文本中的换行符，并相应地设置
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);

html

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

css

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

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

我用过。当我尝试使用橡皮筋时，它经常给我假高度（真的很高）。jQuery AutoSize运行良好，没有出现此问题。
对于我们这些使用Angular JS实现此功能的人，我使用了一个指令

HTML:

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

.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加载后将触发的事件进行排队，这是获得正确的滚动高度所必需的（否则将使用纯JavaScript代码获得
未定义的
）


功能自动增长（元素）{
element.style.height=“5px”；
element.style.height=（element.scrollHeight）+“px”；
}
textarea{
调整大小：无；
溢出：隐藏；
最小高度：50px；
最大高度：100px；
}
var minRows=5；
var maxRows=26；
函数ResizeTextarea（id）{
var t=document.getElementById（id）；
如果（t.scrollTop==0）t.scrollTop=1；
而（t.scrollTop==0）{
如果（t.rows>minRows）
t、 行--；否则
打破
t、 scrollTop=1；
if（t.rows0）{
t、 行++；
打破
}
}
而（t.scrollTop>0）{
if（t.rows
仅在页面加载时，或在用户编辑内容时动态加载？更合适的解决方案是使用具有默认行为的contenteditable标记。我想用css来做。我不确定用css是否可行。elastic js的链接被破坏了……与其只指一个库，更好的答案应该是不需要任何外部库。这个答案可能在一段时间内对任何人都没有帮助。谢谢你们批评我，伙计们，但接受这个答案的决定不是我的，我也不介意别人的方法是否会被接受。我只是尽了最大努力，提出了一个现成的解决方案。因为这是不可能通过CSS实现的，所以在一天结束的时候，你最可能会使用JS，所以为什么不考虑使用已经写过的JS。是的，你可以用谷歌搜索，但我是为你做这项工作的。这是行不通的。我的textarea父母不是body。它在wordpress管理面板的div中。如果你给你的父母一个“高度”，它将得到你父母的
高度。在你的jsfiddle中，100%的身体
高度
+
填充
你给了你，刚刚更新了一个非常圆滑的答案。这似乎工作得很好：textarea.on（'input propertychange keyup change'，function（）{This.rows=This.value.match（/\n/g）.length+1}）是一个很好的解决方案。请注意，它不适用于那些使用
display:block
的用户。除非文本换行，否则它不起作用。如果文本换行，则文本行数不等于换行字符数，因为换行会导致行在单词之间的空白处断开。太好了，谢谢发布！只是想补充一点，我遇到了一个问题，删除文本行并不能减少足够的高度（每次2行，可能与使用引导有关）。我通过先将resize函数中的元素[0].style.height设置为1px，然后将其设置为scrollHeight来修复此问题。我没有收缩它。我添加了几行，使其收缩到默认/初始高度<代码>链接：函数（$scope，element）{
元素[0]。style.height=”“+元素[0]。scrollHeight+“px”
元素[0]。on(“blur keyup change”，resize）；
$timeout（resize，0）；
}
这太棒了。我还需要在模型更改时调整大小（我的
var textarea = $('#wmd-input'),
    top = textarea.scrollTop(),
    height = textarea.height();
    if(top > 0){
       textarea.css("height",top + height)
    }

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

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

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

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