How could I solve this onclick-onblur problem?

Question

I have a form. In it I have a textarea which expands when onclick. But there is a little problem: When the user tries to submit the form (click the submit button), the textarea jumps back to its normal size. This is because it uses the onblur function. I want to eliminate this awkwardness, because the user has to click the submit button twice to submit the form.

What should I do to make it work with one click?

Answer 1

You can set a short timeout in the onblur handler that shrinks the text area:

document.getElementById("textareaID").onblur = function () {
    var target = this;
    setTimeout( function () {
        //Code to shrink the textarea, use "target" instead of "this" for scoping reasons.
    }, 250);

}

Answer 2

textArea.addEventListener('blur', function(e) {
    e.preventDefault();
    return false;
}, true);

This will add a listener to the blur event which will prevent anything else from firing, including whatever it is that's causing the textarea to re-resize. It'd be easier for you to not add the blur hook in the first place, rather than catching it this way, though.