Keep textarea open if change event otherwise animate it on blur

Question

What I'm trying to do is this:

You click in a textarea, and it'll expand to 100px. Normally it's at 50px. If you click outside (or trigger the blur event after clicking in the textarea...) it should go back to it's normal 50px height.

If you trigger the change event by entering something into the textarea, I want to be able to click on the submit button without it triggering the blur (to move it back to 50px).

Am I on the right track?

var expandTextarea = function() {
$('.js-textarea-slide').on('click', function(e) {
    var typed = false;
    $(this).change(function() {
        typed = true;
    });
    $(this).animate({
        height: '100'
    }, 0);
});

$('.js-textarea-slide').blur(function(typed, e) {
    if (!typed) {
        alert('yo');
        return false;
    } else {
        
        $(this).animate({
            height: '50'
        }, 0);
    }
});
};

http://jsfiddle.net/khE4A/

Correct idea, but wrong execution. `typed` will not be passed to the `blur()` handler. — Corbin, Apr 28 '12 at 08:10

Corbin · Accepted Answer · 2012-04-28T08:22:31.083

http://jsfiddle.net/khE4A/4/

var expandTextarea = function() {

    //Note that this is in a scope such that the click, blur and change handlers can all see it
    var typed = false;

    $('.js-textarea-slide').on('click', function(e) {
        //If you bind the change handler in here, it will be bound every time the click event
        //is fired, not just once like you want it to be
        $(this).animate({
            height: '100'
        }, 0);
    }).change(function() {
        typed = true;
    });

    //Note that I got rid of typed and e.
    //If typed were included here, it would not have the value of the typed on line 4.
    //Rather, it would have the value of whatever jQuery's event processing passes as the first
    //parameter.  In addition, it would hide the typed on line 4 from being accessible since
    //they have the same name.
    //Also, I got rid of the e parameter because it's not used, and in JavaScript, it's perfectly
    //acceptable to have a paramter calling/definition count mismatch.
    $('.js-textarea-slide').blur(function() {
        if (!typed) {
            $(this).animate({
                height: '50'
            }, 0);
        }
    });

};

//Since expandTextarea doesn't depend on the context it's called from, there's no need to wrap it
//in an extra function.
$(expandTextarea);

Note that this follows the logic you described in your question, not what your code was trying to do. Anyway, a few important changes:

Your change event would be bound every time the textarea was clicked instead of once. For example, if you clicked on the textarea 3 times, you would bind the event 3 times instead of just the 1 time required.

Also, the part that actually made the code broken was that typed was out of scope of the blur handler. Giving a callback a parameter with a certain name does not pull that variable into scope. In fact, it would mask it if the variable had been in a previously accessible scope.

Another [pedantic] thing:

$(function() {
    expandTextarea();
});

The function wrapping is unnecessary. As expandTextarea does not use this, you can use the function directly:

$(expandTextarea);

Anyway, given the description of the problem in your question, I believe what you're looking for is: http://jsfiddle.net/khE4A/2/

Wow man. That was extremely informative. I like the bit about not wrapping `$(function() { expandTextarea();` Can't thank you enough for explaining this. — bob_cobb, Apr 28 '12 at 08:27
@bob_cobb No problem. I like answering JavaScript questions because it has a ton of little things that I wish I had realized earlier and I like explaining. :) — Corbin, Apr 28 '12 at 08:28

Keep textarea open if change event otherwise animate it on blur

1 Answers1