取消扩展弹性插件

Question

我使用的是弹性插件，这里是我使用的 jQuery：

 <script type="text/javascript">
    jQuery(function(){
    jQuery('textarea').elastic();
    });
 </script>

我在代码中使用了 5 个文本区域。因此，当用户位于 textarea1 时，可以说他按 Enter 10 次并展开 textarea。当他点击第二个 textarea 或点击 textarea1 以外的地方时，有没有办法让 textarea1 恢复到原来的大小？

这也能达到相反的效果吗？如果 textarea1 有 3 行。单击文本区域可以将大小增加到 5 行吗？

Answer 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'); 
    });
});