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中，textarea失去焦点，因此用户无法输入框。如果在动画完成时添加回调以将焦点放在框上，则它不起作用。如果你添加一个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事件的触发会取消选择文本。 this SO answer中讨论了此问题以及涉及preventDefault()的解决方案。

在jQuery高度动画之后专注于Webkit中的textarea

2 个答案: