javascript - 在 jQuery 高度动画之后关注 Webkit 中的文本区域

Question

我有一个 jQuery 事件处理程序，基本上如下所示:

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

正如您所看到的，onfocus 或 onclick 应该使文本区域从初始高度(20px)扩展到扩展高度(60px)。实际上它还做了一些其他事情(例如清除默认值)，但这是唯一给我带来麻烦的部分。

在 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';
  });
});