Implementing a resizable textarea?

问题

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.

回答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.

回答2:

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

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

回答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!

回答5:

what about this, its work

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

来源：https://stackoverflow.com/questions/149421/implementing-a-resizable-textarea

标签

html

resize

textarea