实现一个可调整大小的文本区域?(Implementing a resizable textarea?

2019-07-20 03:00发布

如何实现#1可调整大小textarea的?

那是什么他们推出自己的或者是公开可用的组件,我可以很容易地连接到文本域上我的网站?

我发现这个问题,它并不完全做我想做的。

自动调整大小,文本区域

这更多地谈论,而我想的有点抢区,你可以上下拖动自动调整文字区域。

Answer 1:

StackOverflow的使用jQuery插件来实现: TextAreaResizer 。

这是很容易验证这一点-只拉了JS从网站上的文件。

历史注释:当这个答案最初写的,大规模杀伤性武器和TextAreaResizer是两个独立的插件,无论是其中的一个是由SO Dev Team的创作(参见: micahwittman的答案 )。 此外,针对JavaScript的网站是很容易读懂......这些都不是完全正确了,但仍然TextAreaResizer工作得很好。



Answer 2:

我最近需要一个类似的功能。 其所谓的自动增长 ,这是惊人的插件的jQuery库



Answer 3:

起初我认为它是一个内置的功能WYSIWYM降价编辑器 ,但Shog9是正确的:它不是烤入可言,不过是jQuery插件TextAreaResizer的礼貌(我是10:60由浏览器使用,以检查在编辑的演示 ,因为谷歌的Chrome增加了对文字区域,很像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增长/收缩 - 更改顶部阅读这样的:

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

希望帮助!



Answer 5:

这个是什么,它的工作

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


文章来源: Implementing a resizable textarea?