Question

Stackoverflow如何实现可调整大小的textarea？

这是他们自己推出的东西，还是我可以轻松附加到我网站上的textareas的公开组件？

我发现了这个问题，并没有完全符合我的要求。

这更多地讲述了自动调整textareas的大小，而我想要一个可以上下拖动的小抓取区域。

Answer 1

StackOverflow使用jQuery插件来完成此任务：TextAreaResizer。

验证这一点很容易 - 只需从网站上提取the JS个文件。

历史记录：最初编写此答案时，WMD和TextAreaResizer是两个独立的插件，其中没有一个是由SO开发团队编写的（另请参阅：micahwittman's answer）。此外，该网站的JavaScript非常容易阅读......这些都不再是严格真，但TextAreaResizer仍然可以正常工作。

Answer 2

我最近需要一个类似的功能。它被称为Autogrow，它是令人惊叹的jQuery库的插件

Answer 3

起初我认为它是Wysiwym Markdown editor的内置功能，但Shog9是正确的：它根本不是烘焙，但是礼貌的jQuery插件TextAreaResizer（我被误入歧途）浏览器用来检查editor demo，因为谷歌浏览器本身在textareas上增加了可扩展功能 - 就像Safari浏览器一样。）

Answer 4

使用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);

    }
  };
});

这会将所有textareas变换为增长/缩小。如果您只想要特定的textareas增长/缩小 - 将顶部更改为如下所示：

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

希望有所帮助！

Answer 5

这是什么，它的工作

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

实施可调整大小的textarea？

5 个答案: