从文本区域中删除 jquery 弹性答案

【问题标题】：removing jquery elastic from a textarea从文本区域中删除 jquery 弹性
【发布时间】：2012-03-29 01:17:36
【问题描述】：

我正在使用 jquery elastic 来随着内容的增长自动调整文本区域的高度。

我的文本区域有 id #statusupdate

所以要对它应用弹性，我所要做的就是这个

$('#statusupdate').elastic();

很简单！

我的脚本检测到用户在文本区域之外单击，如果发生这种情况，则会删除用户的文本并向文本区域添加一个类，以使其在屏幕上不那么显眼。

问题在于，将弹性应用于文本区域后，文本区域的高度似乎是由弹性设置的，我无法重新设置它。有什么方法可以从我的文本区域中删除弹性或重置它的数据？

感谢您的帮助

【问题讨论】：

我尝试查看弹性代码（unwrongest.com/projects/elastic 适合在家玩的人）。也许，您可以尝试添加 $twin.addClass('cloneClass');在插件中，然后是基于样式的 .cloneClass。我不明白的是，基于演示页面，更新弹性似乎并没有更新原始文本区域。
恐怕你必须重写插件才能做到这一点
如果您仍然有任何问题，请创建一个 jsfiddle 或上传您正在运行的一些 css 和其他 jquery，以便我们查看。如果可能的话，请详细说明为什么我提供的答案似乎都不适合你=)
@NicolaPeluchetti 你必须重写这个插件才能做到这一点吗？我不明白为什么在 CSS 中使用 !important 作为最坏情况选项不能解决问题。或者通过更改用户选择文本区域以缩小高度时使用的类？感谢您的意见
@ityler22 也许您的解决方案是可以接受的，但我认为这不是正确的方法，这将是在插件中实现 $('yourSelector').elastic("destroy"); 方法来清理已添加的内容。至少恕我直言！

标签： jquery textarea

【解决方案1】：

可能有一种优雅的方式来取消绑定/重新绑定弹性事件，但为了快速强制覆盖，您可以使用 !important 属性覆盖文本区域高度上的 CSS。

创建一个带有 rows 属性的 textarea（这样我们就知道将 textarea 恢复到什么大小）：

<textarea rows="4"></textarea>

将焦点/模糊功能附加到文本区域以覆盖/重置高度：

jQuery(function() {
   $('textarea').focus(function() {
    // remove any height overrides
    $(this).css('height', '');
    // make it elastic
    $('textarea').elastic();
   });
     $('textarea').blur(function() {
     // override the height on the textarea to force it back to its original height
     $(this).css('height', $(this).attr("rows") + 'em !important'); 
   });
});

【讨论】：

嗨，感谢您的复制和粘贴，但我在其他地方看到了这个，它对我来说效果不佳。现在我正在删除整个文本区域，然后在没有附加弹性的情况下重新创建它，这正在完成这项工作
好吧，只是想帮忙，如果你说它不工作没有为什么它不工作，我们还能如何帮助你？在最坏的情况下，您应该能够通过将 !important 添加到 textarea 上的 css 类来使用蛮力覆盖。独自一人，我认为这可以解决您的问题。
抱歉，似乎即使我添加了 !important ，css 仍然不会覆盖弹性将高度设置为的值。我会多玩一点，但目前删除整个元素，然后放入没有弹性的副本似乎可以解决问题。感谢您的帮助。
您是否尝试过上面@Nicola 建议使用的方法：$('yourSelector').elastic("destroy");

【解决方案2】：

使用 wysihtml5 编辑器我发现简单地将 textarea 高度设置为 auto 似乎会覆盖弹性：

$('textarea').css('height', 'auto');

如果需要，可以稍后重新初始化 Elastic：

$('textarea').elastic();

我需要做更多的测试，但到目前为止我还没有发现任何问题（使用 elastic 1.6.11）。

【讨论】：