jQuery 执行实时焦点单击/模糊事件

Question

我有一个文本区域。我想要发生的是，当用户聚焦在文本区域时，它会增长到 4em，当用户没有聚焦在文本区域/模糊时，将其返回到默认的 1em。

这是我到目前为止所拥有的:

$('.comment_content').live('focus click', function() {
   $(this).addClass('grow');
}).live('blur', function() {
   $(this).removeClass('grow');
});

所以这工作得很好，但问题在于。用户可以将文件附加到评论中，例如:

<textarea type="text" class="comment_content"> </textarea>
<div id="attachfile">attach file</div>

我对上述 jQuery 的唯一异常(exception)是，如果用户单击附加文件，则删除类不应运行。

有什么想法吗？

谢谢

Answer 1

我将removeClass函数放在大约500毫秒的setTimeout代码块中。仅当 Attachfile 元素不具有“active”类时才触发代码。然后，将事件处理程序添加到 Attachfile 元素，这会在单击时添加“事件”类。

$('.comment_content').live('focus click', function() {
   $(this).addClass('grow');
});

$("body").live("click focus", function(evt) {
    if (!$(evt.target).is('.grow, #attachfile'))
       $('.comment_content').removeClass('grow');
});

更新 2011 年 1 月 16 日

今天早上更好地理解了这个问题，并创建了以下 jsFiddle。 http://jsfiddle.net/uc8Qv/

丰富