JQuery TextArea AutoGrow 插件

Posted 2023-05-07

【中文标题】JQuery TextArea AutoGrow 插件

【英文标题】：JQuery TextArea AutoGrow Plugin

【发布时间】：2011-06-30 08:44:53

【问题描述】：

我正在努力寻找最好的 textarea autogrow 插件。我需要一个即使我粘贴到它也可以调整文本区域大小的工具。有什么想法吗？

【参考方案1】：

Elastic 是一个非常好的，它也可以处理 CTRL + V 的情况。

您可以访问website 并试用演示。

【讨论】：

+1 因为 Elastic 摇滚，正是我所需要的！ :) 感谢分享。

Elastic 不好有两个原因：(1) 它很慢而且非常滞后，即使在 Google Chrome 中也是如此；(2) 如果在部署中缩小脚本，它会破坏 JS。

好的，你认为哪个插件更好？

【参考方案2】：

为什么不使用它？ http://plugins.jquery.com/project/autogrowtextarea

或者这里插件的另一个更新版本：https://github.com/ro31337/jquery.ns-autogrow

【讨论】：

粘贴时不会自动调整大小... :(

我遇到了 jquery.ns-autogrow 导致某些样式选择的问题。我使用了 autosize.js，它开箱即用，只需一行代码即可设置自动大小。

【参考方案3】：

这是我最终使用的那个。到目前为止工作得很好！

http://www.jacklmoore.com/autosize/

JQuery Elastic 插件很慢，在 IE8 中不适合我。

【参考方案4】：

我在jQuery中使用了以下方法。

setInterval(function()
      $(name_textarea).css('height', $(name_textarea)[0].scrollHeight+2+'px')
,100);

试试看，你可能会更改scrollHeight以获得最佳效果。

【讨论】：

我最终使用 $(name_textarea).prop("scrollHeight") 来获得滚动高度。

【参考方案5】：

您可以尝试 Advanced Textarea。从http://www.jscripts.info下载

自动高度文本区域 返回纯文本和 html 内容 自动 URL 和电子邮件识别 HTML 标签过滤器

【参考方案6】：

我制作了另一个插件来执行此操作，请在此处查看： https://github.com/AndrewDryga/jQuery.Textarea.Autoresize

【参考方案7】：

“我需要一个即使我粘贴到它也可以调整文本区域大小的工具”

此方法还侦听复制/粘贴事件： https://***.com/a/5346855/4481831

我认为在现代浏览器上这些事件可以替换为“输入”事件，但在旧浏览器上这种方法不起作用。

【参考方案8】：

文本区域的自动扩展无需插件即可实现。例如：

 var change_textarea = function() 
   jQuery('#your_textarea').on( 'change keyup keydown paste cut', 'textarea', 
   function()
     jQuery(this).height(0).height(this.scrollHeight);
   ).find( 'textarea' ).change();  
   

别忘了在document ready上调用函数：

  jQuery(document).ready(function() 
     change_textarea();
  );

【参考方案9】：

这是另一个插件，它也支持文本区域的水平增长：

https://github.com/dgbeck/jquery.autogrow-textarea

它也基于“镜像”方法，但在 IE 8 及更低版本中回退到简单的数学，因为镜像方法导致文本区域在 IE