22

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

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

我发现了这个问题，但它并不完全符合我的要求。

自动调整文本区域

这更多地谈到了自动调整文本区域的大小，而我想要你可以上下拖动的小抓取区域。

4

5 回答 5

25

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

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

历史注释：最初编写此答案时，WMD 和 TextAreaResizer 是两个独立的插件，两者都不是由 SO 开发团队编写的（另请参见：micahwittman 的答案）。此外，该站点的 JavaScript 非常易于阅读……这些都不再是严格正确的，但 TextAreaResizer 仍然可以正常工作。

于 2008-09-29T16:28:34.557 回答
11

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

于 2008-09-29T16:20:38.350 回答
4

起初我认为这是Wysiwym Markdown 编辑器的内置功能，但 Shog9 是正确的：它根本不是内置的，而是由 jQuery 插件 TextAreaResizer 提供的（我被浏览器用来检查在编辑器演示中，因为 Google Chrome 本身在 textareas 上添加了可扩展功能——很像 Safari 浏览器所做的）。

于 2008-09-29T16:20:26.290 回答
0

使用 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',

希望有帮助！

于 2015-03-24T19:00:37.567 回答
0

这个怎么样，它的工作

<textarea oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
于 2018-01-26T11:51:45.900 回答