CODEWITHSUNDEEP
javascriptangularjs
aoshima.natsuki
aoshima.natsuki

Reputation: 13

how to build a auto height textarea

I want to make height of textarea equal to height of the text within it (Even when the time of first-rendering resize and confirm with enter)...

The code from that page is below. I'd appreciate any help or pointers.

= = =

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>

Upvotes: 1

Views: 4721

Answers (3)

Ahs N
Ahs N

Reputation: 8386

This is how I would make an auto-resizable textarea with few just a few lines:

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

JSFiddle demo here

Upvotes: 1

Tushar
Tushar

Reputation: 87233

Changes in resize(). Use scrollHeight to get the scroll height of textarea.

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

Thanks to https://stackoverflow.com/a/5346855/2025923

Demo

Upvotes: 2

Jaffer Wilson
Jaffer Wilson

Reputation: 7273

Try this... This will help...ok

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>
Reference: http://codepen.io/kpourdeilami/pen/KDepk

Upvotes: 0

Related Questions