javascript - 如何建立一个自动高度文本区域

Question

我想让 textarea 的高度等于其中文本的高度(即使在第一次渲染时调整大小并使用 enter 确认)...

该页面的代码如下。如果有任何帮助或指点，我将不胜感激。

===

resizeTextarea.js

app.directive('resizeTextarea', function() {
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    template: "<textarea placeholder='please fill in...'></textarea>",
    link: function(scope, element, attrs) {
      var HEIGHT = 25;
      var el = angular.element(element[0])
      el.css('lineHeight', HEIGHT + "px");
      el.css('height', HEIGHT + "px");

      var resize = function(e) {
        var textHeight = e.target.scrollHeight;
        var height = ~~(textHeight / HEIGHT) * HEIGHT
        el.css('height', height + "px");
      };
      el.on('input', resize);
    }
  }
});

===

index.html

<div>
  <resize-textarea></resize-textarea>
</div>

Answer 1

resize() 的变化。使用scrollHeight获取textarea的滚动高度。

var resize = function (e) {
    el.css({
        'height': 'auto',
        'height': this.scrollHeight + 'px' // Get the scroll height of textarea
    });
};
el.on('input', resize);

感谢https://stackoverflow.com/a/5346855/2025923

Demo