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

Posted 2023-05-07

【中文标题】实现可调整大小的文本区域？

【英文标题】：Implementing a resizable textarea?

【发布时间】：2010-09-14 01:07:35

【问题描述】：

*** 如何

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

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

autosizing-textarea

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

【参考方案1】：

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

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

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

【讨论】：

以防万一有人也想知道：scottmoonen.com/2008/07/08/…

不幸的是，指向 UserVoice 的链接已失效（因为 SO 不再使用它）。看看人们对它的看法（手动调整大小与自动调整大小）的讨论会很有趣。

@David：很遗憾，该信息似乎丢失了。 FWIW，我赞成自动调整大小（因此my answer 到上面链接的问题），但我可以理解这对于较长的帖子可能会变得尴尬。

要么我的 google fu 让我失望，要么 TexttAreaResizer 插件永远消失了。 （除非我从 dev.static.net 获取）。

【参考方案2】：

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

【讨论】：

似乎指向自动增长的链接已损坏。正确的是：plugins.jquery.com/project/autogrowtextarea

我喜欢plugins.jquery.com/project/textareaexpander。它使用不同的方法来调整大小，但我认为它更有意义。此外，在我注意到它已经存在之前，我写了几乎完全相同的东西。

$.autoGrow 很简单但功能强大，虽然它看起来很丑，而且会污染全局命名空间 - 很容易解决 - 这是它的 jQuerish 版本：gist.github.com/802204

Autogrow 2.0 版，可以在 jquerys 网站或technoreply.com/autogrow-textarea-plugin-version-2-0

上找到

@0BM 此链接已失效：“此帐户已被暂停”

【参考方案3】：

起初我认为它是 Wysiwym Markdown editor 的内置功能，但 Shog9 是正确的：它根本不是内置的，而是由 jQuery 插件 TextAreaResizer 提供的（我被浏览器误入歧途是用于检查editor demo，因为谷歌浏览器本身在 textareas 上添加了可扩展功能——很像 Safari 浏览器所做的）。

【参考方案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',

希望有帮助！

【参考方案5】：

这个呢，它的工作

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

【讨论】：

虽然这段代码 sn-p 可以解决问题，including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。