un expand弹性插件

Question

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

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

我在代码中使用了5个文本区域。因此，当用户处于textarea1状态时，假设他按了10次enter并展开文本区域。有没有办法当他点击第二个文本区或点击textarea1之外的地方时，textarea1就会回到原来的大小？

这对也可以做到吗？如果textarea1有3行。单击文本区可以将大小增加到5行吗？

Answer 1

可能有一种很好的方法来解除/重新绑定elastic的事件，但是对于一个快速的暴力覆盖，您可以使用!important属性来覆盖文本区域高度上的CSS。

创建一个带有rows属性的文本区(这样我们就知道要将文本区恢复到什么大小)：

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