javascript - 如何在输入上创建两个按钮，例如 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

如果您首先将input具有 的存储focus到 a中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符号。

比我们只是确保prevornext元素实际上是一个inputusing：

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