选项卡到输入条件后的下一个选项卡索引

Tab to next tab index after input condition

本文关键字:选项 下一个 索引 条件 输入      更新时间:2023-09-26

在满足条件后,我试图自动添加到下一个tabindex。知道如何在不使用下一个元素的id标记的情况下访问tabindex吗?。

HTML:

<tr>
<td id = "t3"> <input type="text" id = "ate" oninput="ate()" tabindex= "1" class = "tabable"/> </td>
<td id = "t3"> <input type="text" id = "eaten" oninput ="eaten()" tabindex= "2" class = "tabable" /> </td>
</tr>

JS

function ate(){
var value = document.getElementById("ate").value;
var get_tab = document.getElementById("ate").getAttribute('tabindex');
var next_tab = get_tab + 1 ;
if (value == "ate") {
        $('#ate').fadeTo(1000, 0);
        $('#ate').prop('tabIndex', -1);
        //document.getAttribute('tabindex'); ??     
}

Yo可以用这个选择器选择一个元素:

$('input[tabindex="2"]')

使用类名.tabable查找下一个input并添加.focus()

下面是一个实际示例:

function ate() {
  var value = document.getElementById("ate").value;
  var get_tab = document.getElementById("ate").getAttribute('tabindex');
  var next_tab = get_tab + 1;
  if (value == "ate") {
    $('#ate').fadeTo(1000, 0);
    $('#ate').prop('tabIndex', -1);
    //document.getAttribute('tabindex'); ??  
    $('#ate').next('.tabable').focus();
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td id="t3">
    <input type="text" id="ate" oninput="ate()" tabindex="1" class="tabable" />
  </td>
  <td id="t3">
    <input type="text" id="eaten" oninput="eaten()" tabindex="2" class="tabable" />
  </td>
</tr>