自动调整jQuery插件的大小，触发自动调整更新

Autosize jQuery plugin, trigger a autosize.update

本文关键字：调整 更新 jQuery 插件      更新时间：2023-09-26

我正在使用Autosize自动调整文本框的大小（高度）。该插件是JS，但可以用作jQuery插件（在网站中解释）。作者解释了如何在使用JavaScript更改文本时触发手动"更新"事件（JS）。我也需要这样做，但使用jQuery"模式"，因为我使用Ajax动态创建文本框。尝试了trigger（），但没有成功。

autosize(ta); /*Pure JS*/
ta.value = "Something really long";
var evt = document.createEvent('Event');
evt.initEvent('autosize.update', true, false);
ta.dispatchEvent(evt);

以下是我的一段源代码：http://pastebin.com/049UfkGv-在$（this）.autosize（）之后我需要触发"autosize.update"事件来将文本框重定为新内容。

jQuery代码：

 $(document).ready(function(){
  window.jQuery.fn.autosize=function(){ return autosize(this); };
 });
 $('.edit4').each(function(){
   $(this).keypress(function(event) { if (event.keyCode==13) { event.preventDefault(); };
   $(this).autosize();
 });

谢谢！

您可以按如下方式使用它：

autosize.update($('textarea'));

在我的案例中，Autosize jQuery插件无法计算正确的高度，因为文本区域在页面加载时被隐藏。

下面的老虎帮了我一把：

function showMyTextarea(){
  // do your stuff here
  // trigger autosize     
  $('textarea').trigger('autosize.resize');
}

在我的情况下，我不仅必须根据更改的内容更新文本区域的大小（这由"autosize"插件本身很好地处理），还必须根据CSS属性的更改来更新，例如，当用户使用滑块更改文本区域的字体大小时。

这对我有效：

// ... slider ui init bla bla
slide: function(){
  var $textarea = $('.your.selector.for.textarea.or.cached.jQuery.object.with.target.textarea');
  // .. changing the actual css property 
  // triggering the .autosize
  $textarea.trigger('autosize.resizeIncludeStyle');
  // ... etc etc
}
// ...

Autosize文档中没有正确描述这一点，但该事件确实存在，并在插件的jQuery版本中处理。

Autosize创建一个自定义事件，可以手动触发，如下所示：

$("thextarea").trigger("autosize");
相关文章：