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

Question

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

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

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

autosizing-textarea

这更多地讨论了自动调整文本区域的大小，而我想要一个可以向上拖动的小抓取区域向下。

Answer 1

我最近需要类似的功能。 它名为 Autogrow，它是令人惊叹的 jQuery 库

Answer 2

起初我认为这是 Wysiwym Markdown 编辑器 的内置功能，但 Shog9 是正确的：它是根本没有内置，但是由 jQuery 插件 TextAreaResizer 提供（我被用来检查 编辑器演示，因为 Google Chrome 本身在文本区域上添加了可扩展功能 - 与 Safari 浏览器非常相似）。

Answer 3

StackOverflow 使用 jQuery 插件来完成此操作：TextAreaResizer。

验证这一点很容易 - 只需从站点中提取 JS 文件即可。

历史注释：最初编写此答案时，WMD 和 TextAreaResizer 是两个独立的插件，它们都不是由 SO 开发团队编写的（另请参阅：micahwittman 的回答）。 此外，该网站的 JavaScript 非常容易阅读...这些都不再是严格的真实情况，但 TextAreaResizer 仍然工作得很好。

Answer 4

现在可以使用仅 CSS 的解决方案

（至少需要 Chrome v123）

使用（新）field-sizing 属性：

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

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

Answer 5

使用 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 6

这个怎么样，它的工作

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