WebKit中着眼於一個textarea jQuery的高度動畫後

Question

我有一個jQuery的事件處理程序，基本上是這樣的：

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

正如你所看到的，聚焦狀態或的onclick它應該是動畫textarea的擴張從最初的高度（20px）到它的展開高度（60px）。實際上還有其他一些事情（如清除默認值），但這是唯一給我帶來麻煩的部分。

在Firefox/IE中，textarea保留焦點，而高度動畫和用戶可以在單擊textarea後立即開始輸入。在Chrome/Safari中，textarea失去焦點，所以用戶無法輸入框。如果您在動畫完成時添加回調以專注於該框，則不起作用。如果你添加一個select（）關注（），如下面的例子，它的工作：

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

不幸的是，當用戶點擊並開始打字，前幾個字符可能會丟失，因爲他們必須等待爲動畫完成。

這是一個webkit的bug嗎？我如何讓動畫運行並立即響應用戶的輸入？

Answer 1

這可能是（已知）webkit bug。顯然，事件的觸發取消選擇文本。該問題以及涉及preventDefault()的解決方案在this SO answer中進行了討論。

Answer 2

試試這個：

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