1

I have a jQuery event handler that essentially looks like this:

$("textarea").live("focus, click", function() {
  var o = $(this),
      expand_height = "60px";
  o.animate({height : expand_height});
}

As you can see, onfocus or onclick it is supposed to animate the expansion of the textarea from it's initial height (20px) to it's expanded height (60px). There are a couple other things it does in reality (like clearing the default value), but this is the only part giving me trouble.

In Firefox/IE, the textarea retains focus while the height animates and the user can begin typing immediately upon clicking the textarea. In Chrome/Safari, the textarea loses focus so the user is unable to type in the box. If you add a callback when the animation completes to focus on the box, it doesn't work. If you add a select().focus() as in the following example, it does work:

$("textarea").live("focus, click", function() {
  var o = $(this),
      expand_height = "60px";
  o.animate({height : expand_height}, function() {
   o.select().focus();
  });
}

Unfortunately, when the user clicks and starts typing, the first few chars can be lost because they have to wait for the animation to complete.

Is this a bug with webkit? How can I let the animation run AND make it responsive to the user's typing right away?

CraigTeegarden
  • 8,173
  • 8
  • 38
  • 43
VNO
  • 3,645
  • 1
  • 16
  • 25

2 Answers2

1

try this:

$("textarea").live("focus, click", function() {
  var o = $(this),
      expand_height = "60px";
  o.animate({height : expand_height}, function() {
       o.style.display = 'block';
  });
});
shufenghua
  • 11
  • 1
0

This is probably a (known) webkit bug. Apparently the firing of the onmouseup event deselects the text. This problem, and a solution involving preventDefault(), are discussed in this SO answer.

Community
  • 1
  • 1
Ken Redler
  • 23,863
  • 8
  • 57
  • 69
  • Thanks for the quick response. I actually saw this question and tried the solution prior to asking here. I added $("textarea").live("mouseup", function(e) { e.preventDefault() }); and this does not work in this instance. – VNO Aug 06 '10 at 20:19