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

Expand snippet

Question 2

对于我们这些使用 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）

Question 3

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

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

更新：似乎 elastic.js 不再存在，但如果您正在寻找外部库，我可以推荐Jack 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/jackmoore/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>

Expand snippet

也检查这个类似的主题：

使用 Prototype 自动调整 textarea 的大小

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

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

Question 4

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

Question 5

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

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

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

Expand snippet

如果您添加一些额外的高度，它将在调整元素大小之前的瞬间停止文本滚动。 (element.scrollHeight+20)+"px";

2021-03-18 07:38:44

简单的内联 JS 解决方案 <textarea class="form-control" onkeyup="$(this).height(5);$(this).height($(this).prop('scrollHeight'))"></textarea>

2021-03-20 07:38:44

我可以建议使用 oninput 吗？和高度 = 自动而不是 5px？

2021-04-06 07:38:44

惊人的香草 js 解决方案！

2021-04-09 07:38:44

效果很好，但有初始“跳跃”。添加： if (element.scrollHeight > 80) { element.style.height = 5 + "px"; element.style.height = (element.scrollHeight + 10) + "px"; 有帮助。（最小高度：80px）

2021-04-11 07:38:44

Answer 2

对于我们这些使用 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）

它对我来说并没有缩小。我添加了几行，使其缩小到默认/初始高度。 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("blur keyup change", resize); $timeout(resize, 0); }
亲爱的，谢谢发布！只是想补充一点，我遇到了一个问题，即删除文本行不会降低高度（一次 2px，可能与使用引导程序有关）。我通过首先将 resize 函数中的 element[0].style.height 设置为 1px，然后将其设置为 scrollHeight 来解决这个问题。
这很棒。我还需要在模型更改时调整大小（我的评论框是动态的）。所以我补充说： $scope.$watch(attrs.ngModel, resize);
经历与@kopi_b 相同的事情——scrollHeight 为 0。当它包含在通过 ngShow 显示/隐藏的祖先元素中时，似乎会发生这种情况。
@Bob element.on("blur keyup change", resize)应该涵盖模型更改。

Answer 3

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

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

更新：似乎 elastic.js 不再存在，但如果您正在寻找外部库，我可以推荐Jack 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/jackmoore/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>

Expand snippet

也检查这个类似的主题：

使用 Prototype 自动调整 textarea 的大小

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

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

谢谢你们批评我，但接受它作为答案的决定不是我的，我不介意是否会接受其他人的方法。我只是尽力而为，并提出了一个现成的解决方案。由于无法通过 CSS 实现这一点，最终您很可能最终会使用 JS，那么为什么不考虑使用已经编写好的 JS。是的，你可以谷歌搜索，但我为你做了这项工作。
而不是仅仅指一个库，更好的答案是不需要任何外部库。这个答案可能在一段时间内没有帮助任何人。

Answer 4

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

Answer 5

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

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

这很光滑。这似乎工作得很好： textarea.on('input propertychange keyup change', function(){ this.rows = this.value.match(/\n/g).length + 1 })
除非文本换行，否则它不起作用。如果文本换行，则文本的行数不等于换行符的数量，因为换行会导致在单词之间的空白处换行。
很好的解决方案。请注意，它不适用于使用display:block.

Textarea自动高度