Question

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

我的文字区域有id #statusupdate

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

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

非常简单！

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

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

感谢您的帮助

Answer 1

可能有一种优雅的解除/重新绑定弹性事件的方法，但是对于快速强力覆盖，您可以使用！important属性覆盖textarea高度上的CSS。

创建一个带有rows属性的textarea（所以我们知道要将textarea恢复到的大小）：

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

将焦点/模糊功能附加到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'); 
   });
});

Answer 2

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

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

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

$('textarea').elastic();

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

从textarea中删除jquery弹性

2 个答案: