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

Answer 2

这就是我如何制作一个可自动调整大小的textarea，只需几行：

$(document).ready(function () {
    $('textarea').keypress(function () {
        var scroll = $('textarea').scrollTop();
        if (scroll > 0) {
            $('textarea').height($('textarea').height() + scroll);
        }
    });
});

JSFiddle demo here

Answer 3

希望它会奏效。检查jsfiddle。 textarea将自动增长，并在限制（高度）后显示滚动。当您按退格键或删除所有文本时，它将缩小为原始大小。

chekc this following link:

https://jsfiddle.net/xwkw3a2r/1/

Answer 4

试试这个......这会有所帮助......好的

var app = angular.module('myApp', []);

app.controller('AppCtrl', ['$scope', '$http', '$timeout',
  function($scope, $http, $timeout) {

    // Load the data
    $http.get('http://www.corsproxy.com/loripsum.net/api/plaintext').then(function(res) {
      $scope.loremIpsum = res.data;
      $timeout(expand, 0);
    });

    $scope.autoExpand = function(e) {
      var element = typeof e === 'object' ? e.target : document.getElementById(e);
      var scrollHeight = element.scrollHeight - 60; // replace 60 by the sum of padding-top and padding-bottom
      element.style.height = scrollHeight + "px";
    };

    function expand() {
      $scope.autoExpand('TextArea');
    }
  }
]);

body {
  background: #43434B;
  padding-top: 100px;
}
textarea {
  height: auto;
  max-width: 600px;
  color: #999;
  font-weight: 400;
  font-size: 30px;
  font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
  width: 100%;
  background: #fff;
  border-radius: 3px;
  line-height: 2em;
  border: none;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  padding: 30px;
  -webkit-transition: height 2s ease;
  -moz-transition: height 2s ease;
  -ms-transition: height 2s ease;
  -o-transition: height 2s ease;
  transition: height 2s ease;
}
* {
  -webkit-font-smoothing: antialiased !important;
}

<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400' rel='stylesheet' type='text/css'>
<div ng-app="myApp">
  <div ng-controller="AppCtrl" align="center">
    <textarea id="TextArea" ng-model="loremIpsum" ng-keyup="autoExpand($event)" placeholder="This is an auto expanding textarea with just angularjs ... try typing something.">
    </textarea>
  </div>
</div>

参考：http://codepen.io/kpourdeilami/pen/KDepk

如何建立一个自动高度textarea

4 个答案: