Question

I’ve set up a jsFiddle here, code below.

I just have a textarea that gets a class added to it on focus and on blur it gets removed. The class makes the textarea extend by setting a height css attribute, so when you click the button to submit the form I don’t want it to remove the class because it just seems awkward.

HTML

<div class="comment_display">
    <form>
        <textarea class="addcomment"></textarea>
        <input class="tagbtn" type="submit" value="Comment" />
    </form>            
</div>​

CSS

.addcommentOn {
    height: 100px;
}​

Javascript

// Lengthen the Discussion input on click
  $(function lengthenInput() {
    $(".addcomment").focus(function() {
        $(this).addClass("addcommentOn");
    });

    $(".addcomment").blur(function() {
        if ($("input.comment").data('clicked') != true) {
            $(this).removeClass("addcommentOn");
        }
    });
  });​

Answer 1

Trying to fight with blur is not easy since it occurs prior to any mouse event on another element

Here’s one concept that would need additional modification if you want the textarea to shrink when user leaves form. Replace blur handler with following:

$('form').on('click', function(evt) {
    var $tgt = $(evt.target);
     if ($tgt.is('input[type="submit"]') || $tgt.is('.addcommentOn')  ) {
          return;
      }else{
           $('.addcommentOn').not($tgt).removeClass("addcommentOn");
      }
})

EDIT: need to also modify focus handler a bit once more elements added to form:

 $(".addcomment").focus(function() {
    $('.addcommentOn').removeClass('addcommentOn');
    $(this).addClass("addcommentOn");

});

DEMO(updated): http://jsfiddle.net/GzmrS/38/