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

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

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

[one]

another

然后，当点击选项卡时：

one
[   ]
another

然后完成：

one

[another]

正如您所看到的，对于键盘用户来说，这是一个非常明显的重点

坏消息是：我再也找不到这个图书馆了，或者类似的东西了。因此，我的问题是：

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

---

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

效果被调用，库被调用

事实上，如果我理解你的意思是正确的，这并不是很难产生效果（当然取决于条件）

只需在css中创建一个“虚拟”隐藏的outline对象，将焦点事件上的处理程序附加到所有需要的输入，并在附加的处理程序中根据需要移动大纲

例如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
    });
});