实施可调整大小的textarea？

StackOverflow https://stackoverflow.com/questions/149421

  •  02-07-2019
  •  | 
  •  

题

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

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

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

autosizing-textarea

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

有帮助吗？

解决方案

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

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

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

其他提示

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

起初我认为它是 Wysiwym Markdown编辑器的内置功能，但Shog9是正确：它根本没有出炉，但是jQuery插件TextAreaResizer是礼貌的（浏览器误导我用来检查编辑器演示因为谷歌浏览器本身在textareas上添加了可扩展功能，而且非常类似于Safari浏览器。

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

希望有所帮助！

这是什么，它的工作

<textarea oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top