Question

我有一个我想通过键盘控制的网络应用程序。

我最近看到一个库在表单字段之间显示时显示蓝色轮廓的移动。例如，从突出显示的字段'one'开始：

[one]

another

然后点击标签时：

one
[   ]
another

然后完成：

one

[another]

正如您所看到的那样，对于键盘用户来说焦点正在变得非常明显。

坏消息：我找不到更多这个库，或类似的东西。所以我的问题是：

是否有一个工具可以在像这样的场焦点变化时显示移动？，更重要的是，它在哪里？

编辑：更明确一点：不，我真的不希望新选择的字段有动画边框。

Answer 1

效果称为Focus Transition，库名为Flying Focus。

Answer 2

实际上，如果我理解你的话，它的影响不是很大（当然取决于条件）。

只需在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/）

HTML：在输入之间进行标签显示移动？

2 个答案: