Question

我在条件满足后尝试自动选项到下一个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'); ??     
}

Answer 1

Yo可以使用此选择器选择一个元素：

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

Answer 2

使用类名input查找下一个.tabable并添加.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>

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

2 个答案: