jQuery高度动画后专注于Webkit中的文本区域

Question

我有一个基本上看起来像这样的 jQuery 事件处理程序：

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

如您所见，onfocus 或 onclick 应该为 textarea 从初始高度 (20px) 到展开高度 (60px) 的扩展设置动画。它实际上还有其他几件事（比如清除默认值），但这是唯一给我带来麻烦的部分。

在 Firefox/IE 中，textarea 保持焦点，而高度动画，用户可以在单击 textarea 后立即开始输入。在 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 bug。显然，onmouseup 事件的触发会取消选择文本。此问题以及涉及preventDefault() 的解决方案在this SO answer 中讨论。