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.

Zeigler

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.

Iroquoian

Just in case someone wonders that too: scottmoonen.com/2008/07/08/… – Illegal

Unfortunately, the link to UserVoice is dead (since SO doesn't use it anymore). It would be interesting to see the discussion to see what people thought about it (manual resize vs. auto resize). – Northington

@David: sadly, that information appears to be lost. FWIW, I was in favor of auto-resize (hence my answer to the question linked above), but I can appreciate that this might become awkward for longer posts. – Iroquoian

Either my google fu is failing me or that TexttAreaResizer plugin is gone for good. (except if I take it from the dev.static.net). – Haemophilia

Answer 2

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

Shana

It seems that link to autogrow is broken. Correct one is: plugins.jquery.com/project/autogrowtextarea – Acidulant

I like plugins.jquery.com/project/textareaexpander. It uses a different approach to resize, but I think it makes more sense. Also, I wrote pretty much exactly the same thing before I noticed that it already existed. – Northington

$.autoGrow is simple but powerful although it looks ugly and pollutes the global name-space - easy cure - here's a more jQuerish version of it: gist.github.com/802204 – Unfledged

Version 2.0 out of Autogrow, can be found on jquerys site or technoreply.com/autogrow-textarea-plugin-version-2-0 – Engaging

@0BM this link is dead: "This Account Has Been Suspended" – Shana

@knight_killer - looks like its been temporary? The link is still working here. – Engaging

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).

Spun

Answer 4

CSS-only solution is now possible

(requires Chrome v123 minimum)

Using the (new) field-sizing property:

textarea {
  field-sizing: content;
  width: 250px;
}

<textarea>
Here is a
Multiline
Textarea
</textarea>

Helping

Answer 5

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!

Toreador

Answer 6

what about this, its work

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

Russianize

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Duhon