0

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

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

[one]

another

然后当标签被点击时：

one
[   ]
another

然后整理：

one

[another]

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

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

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

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

4

2 回答 2

1

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

于 2013-11-01T11:02:57.650 回答
1

实际上，如果我理解你是正确的，这不是很硬的效果（当然取决于条件）。

只需在 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-01T12:34:35.173 回答