Question

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

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

我在代码中使用了5个textarea。所以当用户在textarea1时，让我说按下输入10次并扩展textarea。有没有办法当他点击第二个textarea或点击textarea1之外的textarea1回到其原始尺寸？

这也可以反过来吗？如果textarea1有3行。点击文本区域可以将大小增加到5行吗？

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

un expand弹性插件

1 个答案: