实现可调整大小的文本区域？

Question

Stackoverflow 如何实现可调整大小的文本区域？

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

我发现了这个问题，但它并没有达到我想要的效果。

autosizing-textarea

更多的是关于自动调整文本区域的大小，而我想要一个可以上下拖动的小抓取区域。

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

    }
  };
});

这会将您的所有文本区域转换为增长/缩小。如果您只希望特定文本区域增长/缩小 - 将顶部更改为如下所示：

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

希望有帮助！

Answer 5

这个呢，它的工作

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