Implementing a resizable textarea?

Question

How does Stackoverflow implement the resizable textarea?

Is that something they rolled themselves or is it a publicly available component that I can easily attach to textareas on my sites?

I found this question and it doesn't quite do what I want.

autosizing-textarea

That talks more about automatically resizing textareas whereas I want the little grab-area that you can drag up and down.

Answer 1

StackOverflow uses a jQuery plugin to accomplish this: TextAreaResizer.

It's easy enough to verify this - just pull the JS files from the site.

Historical note: when this answer was originally written, WMD and TextAreaResizer were two separate plugins, neither one of which was authored by the SO Dev Team (see also: micahwittman's answer). Also, the JavaScript for the site was quite easy to read... None of these are strictly true anymore, but TextAreaResizer still works just fine.

Answer 2

I needed a similar functionality recently. Its called Autogrow and it is a Plugin of the amazing jQuery library

Answer 3

At first I believed it was a built-in feature of the Wysiwym Markdown editor, but Shog9 is correct: it's not baked-in at all, but is courtesy of the jQuery plugin TextAreaResizer (I was lead astray by the browser was using to check on the editor demo because Google Chrome itself adds the expandable functionality on textareas—much like the Safari browser does).

Answer 4

Using AngularJS:

angular.module('app').directive('textarea', function() {
  return {
    restrict: 'E',
    controller: function($scope, $element) {
      $element.css('overflow-y','hidden');
      $element.css('resize','none');
      resetHeight();
      adjustHeight();

      function resetHeight() {
        $element.css('height', 0 + 'px');
      }

      function adjustHeight() {
        var height = angular.element($element)[0]
          .scrollHeight + 1;
        $element.css('height', height + 'px');
        $element.css('max-height', height + 'px');
      }

      function keyPress(event) {
        // this handles backspace and delete
        if (_.contains([8, 46], event.keyCode)) {
          resetHeight();
        }
        adjustHeight();
      }

      $element.bind('keyup change blur', keyPress);

    }
  };
});

This will transform all your textareas to grow/shrink. If you want only specific textareas to grow/shrink - change the top part to read like this:

angular.module('app').directive('expandingTextarea', function() {
  return {
    restrict: 'A',

Hope that helps!

Answer 5

what about this, its work

<textarea oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>