HTML：在输入之间切换时显示移动？答案

【问题标题】：HTML: show movement when tabbing between inputs?HTML：在输入之间切换时显示移动？
【发布时间】：2013-11-12 13:20:54
【问题描述】：

我有一个网络应用程序，我希望可以通过键盘进行控制。

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

[one]

another

然后当tab被点击时：

one
[   ]
another

然后整理：

one

[another]

如您所见，对于键盘用户来说，焦点转移到了非常明显的位置。

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

有没有一种工具可以在像这样的场焦点变化期间显示运动？更重要的是，它在哪里？

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

【问题讨论】：

标签： javascript html forms keyboard accessibility

【解决方案1】：

效果叫Focus Transition，库叫Flying Focus。

【讨论】：

是的！如果您更改答案，我会将其标记为正确。谢谢！
我添加了指向答案正文的链接

【解决方案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/)

【讨论】：