接受jQuery輸入焦點/選擇/模糊的輸入鍵的最佳方式？

以下jsfiddle ... http://jsfiddle.net/mqVUU/ ...是一個簡單的輸入字段UI調整。目標是：接受jQuery輸入焦點/選擇/模糊的輸入鍵的最佳方式？

上聚焦，放大輸入（通過動畫）
上聚焦，選擇當前輸入內容
在輸入被按下時「輸入」，模糊的輸入
模糊，縮小輸入

這裏是迄今爲止腳本...

$('input').on({ 
    focus: function(){ 
     $(this).animate({'width':200}, 300, 'easeInOutBack'); 
     $(this).select(); 
    }, 
    keydown: function(e){ 
     if (e.keyCode == 13) { 
      $(this).blur(); 
     } 
    }, 
    blur: function(){ 
     $(this).animate({ 'width':100}, 300, 'easeInOutBack'); 
     $('#result').html($(this).val()); 
    } 
});

誰能幫助這些問題...

如果我把它放在animate()回調，任何用戶類型而動畫正在發生被覆蓋，這是個問題。那麼讓select()正常工作的最好方法是什麼？
參數是否真的是接受enter作爲觸發器的唯一方法？

感謝您的指點:)

來源

2012-10-09 neokio

_「爲什麼不選擇（）工作？」_ - 它在FF中使用你的小提琴。 _「是__ keydown _ _參數真的是接受輸入作爲觸發器的唯一方式」_ - 嗯，這是關鍵_up ..._ – nnnnnn

如果你不想在你的代碼中使用keyCode（13）它在表單中，並處理表單的提交事件。 – techfoobar

@techfoobar很好！ +1 – neokio

在webkit瀏覽器（Chrome和Safari）中，簡單的.select（）並不總是有效，因爲mouseup的默認操作是清除選擇。所以你需要添加這個處理程序：

mouseup: function(e) { 
      e.preventDefault(); 
     }

至於keydown - 這是最好的方式來做到這一點。還有其他的，但他們不會給你任何好處。

來源

2012-10-09 06:50:31 jlmcdonald

釘了它。這消除了通過回調選擇（）'，這是工作jsfiddle：http://jsfiddle.net/mqVUU/5/ ...謝謝你！ – neokio

1）將在動畫完成選擇：

$(this).animate({'width':200}, 300, 'easeInOutBack', function(){ 
    $(this).select(); 
});

2）如果要模糊輸入 - 是的。

來源

2012-10-09 06:45:38 Inferpse

你完全回答了這個問題......我剛剛澄清了一下。在嘗試過回調之前（請參閱http://jsfiddle.net/mqVUU/4/），至少在Chrome中，動畫會混淆「select（）」......您是否也有這個問題？ – neokio

是的。看起來問題出現在某些瀏覽器中，因爲在選擇了文本內部的情況下更改了輸入尺寸。 – Inferpse

接受jQuery輸入焦點/選擇/模糊的輸入鍵的最佳方式？

回答

相關問題