Why jquery.animate on a textarea make the blinking cursor disapears?

Question

Hello everyone.

I have the following code

$(document).ready(function() {
    $("#myTextArea").focus(function() {
        $("#myTextArea").animate({ "height": "75px"}, "normal");
        return false;
    });

to expand a textbox when it gets focus. The expand occurs, however the blinking cursor disapears, at least in Firefox!

Edited: The textarea is still focused, and i can type on it.

Why does this happen? Is there a way to show it again?

Thanks in advance

Answer 1

Your return false statement is cancelling the focus action :) You only get a cursor when the element is focused, I'd just remove this line from your function.

Aside from that, .focus() in a text area isn't something you can reclaim easily, because it had a position that matters, you're better off sticking with a CSS change here:

$("#myTextArea").focus(function() {
    $(this).css({ "height": "75px" });
});

This won't affect cursor behavior at all and work the saema cross browsers (focus is still different amongst browsers), but of course won't animate. The alternative (I haven't tested this in all browsers) is that you could trigger the focus again with the same args after the animate, restoring the position, like this:

$("#myTextArea").focus(function(e) {
    if($(this).height() == 75) return;
    $(this).animate({ height: 75}, "normal", function() {
        $(this).blur().trigger(e);
    });
});​

You can test this from here, just be sure to check all browsers, as focus behavior can vary slightly between them.