HTML：在輸入之間切換時顯示移動？

我最近看到一個庫，它在表單字段之間切換時顯示藍色輪廓的移動。例如，從外地 '一' 強調：

[one] 

another

然後，當標籤被擊中：

one 
[ ] 
another

再整理：

one 

[another]

正如你所看到的，這其中的焦點對鍵盤用戶來說非常明顯。

壞消息：我找不到這個庫，或者其他任何類似的東西。所以我的問題：

是否有一個工具來顯示像這樣的場焦點變化期間的運動？，更重要的是，它在哪裏？

編輯：更明確一些：不，我真的不希望讓新選擇的字段具有動畫邊框。

來源

2013-11-01 mikemaccana

效果被稱爲Focus Transition，該庫被稱爲Flying Focus。

來源

2013-11-01 11:02:57 Akuma

你的意思是這個http://n12v.com/focus-transition/？ – Akuma

是的！如果您更改了答案，我會將其標記爲正確。謝謝！ – mikemaccana

我已添加鏈接到答案的正文 – Akuma

其實它不是很硬的效果（當然取決於條件），如果我理解你是正確的。

在CSS只需創建一個「虛擬」隱藏的外形對象，並貼在焦點事件處理程序，你需要所有的輸入和你想要將你的輪廓在連接處理器

例如使用jQuery（寫在這裏，可不工作）：

var $outline = $('#outline'); 
var padding = 6; 

$('input').focus(function() { 
    var width = parseInt($(this).width()) + padding; 
    var height = parseInt($(this).height()) + padding; 
    var top = $(this).parent().offset()['top'] - padding/2; 
    var left = $(this).parent().offset()['left'] - padding/2; 
    $outline.stop().animate({ 
     top: top, 
     top: top, 
     width: width, 
     left: left 
    }); 
});

你可以試試這個小提琴（http://jsfiddle.net/C4Gde/）有類似的東西

來源

2013-11-01 12:34:35 Gugic

HTML：在輸入之間切換時顯示移動？

回答

相關問題