Сосредоточение внимания на текстовой области в Webkit после анимации высоты jQuery

Question

У меня есть обработчик событий jQuery, который по сути выглядит так:

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

Как вы можете видеть, при фокусировке или щелчке он должен анимировать расширение текстовой области от ее начальной высоты (20 пикселей) до расширенной высоты (60 пикселей) Есть несколько других вещей, которые он делает в реальности (например, очистка значения по умолчанию), но это единственная часть, которая доставляет мне неприятности.

В Firefox / IE текстовая область сохраняет фокус, в то время как высота анимируется, и пользователь может начать печатать сразу после нажатия текстовой области. В Chrome / Safari текстовая область теряет фокус, поэтому пользователь не может ввести текст в поле. Если вы добавите обратный вызов, когда анимация завершится, чтобы сфокусироваться на рамке, это не сработает. Если вы добавите select (). Focus (), как в следующем примере, это сработает:

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

К сожалению, когда пользователь нажимает и начинает печатать, первые несколько символов могут быть потеряны, потому что они должны ждать завершения анимации.

Это ошибка с webkit? Как я могу позволить анимации работать и заставить ее сразу реагировать на ввод текста пользователем?

Answer 1

попробуйте это:

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

Answer 2

Это, вероятно, (известная) ошибка webkit . По-видимому, запуск события onmouseup отменяет выделение текста. Эта проблема и решение, включающее preventDefault(), обсуждаются в этом SO-ответе .