如何在输入上创建两个按钮，例如 Tab（下一个焦点）按键和 Shift+Tab（上一个焦点）[重复]

Question

在互联网上搜索 2 小时后找不到我想要的东西。

这是我的问题： 如何创建一个按钮，其作用类似于“Tab 键”和“Shift + Tab 键”它聚焦下一个输入文本或上一个和第一次按下将聚焦第一个输入。

类似这样的：

<div class="inputs">
    <input type="text" tabindex="1"/>
    <input type="text" tabindex="2" />
    <input type="text" tabindex="3" />
    <input type="text" tabindex="4" />
    <button>Tab(Go next input to Focus)</button>
    <button>Shift + Tab (fo Previous input to focus)</button>
</div>

抱歉，我的问题和英语表达不好

Answer 1

如果您首先将具有focus 的input 存储到var 中，那真的很简单：

LIVE DEMO

var $curr;
$('.inputs input').on('focus',function(){
  $curr = $(this);
});
$('.prevTab, .nextTab').on('click', function( e ){
  $curr[ $(this).hasClass("nextTab") ? "next" : "prev" ]('input').focus();
});

---

更复杂的那一行实际上是这样的

$curr.prev('input').focus(); 或 $curr.next('input').focus(); 取决于使用简单的 三元运算符 逻辑单击哪个按钮：

if .nextTab is clicked ["next"] will be used
if .prevTab is clicked ["prev"] will be used

考虑到符号

$curr["next"]() is the same as $curr.next() method
$curr["prev"]() is the same as $curr.prev() method

只使用插入dot 符号的括号。

我们只是确保prev 或next 元素实际上是input 使用：

 ('input').focus(); // and set the focus to it!