javascript - 如何转到下一个未禁用的输入文本，避免中间的输入文本？

Question

我有一个表格表单，其中包含许多变量输入，如下所示:

id='ins_v_1' || id='X_1' || id='an1_1' ||_id='an2_1'_||_id='an3_1'_

id='ins_v_2' || id=_'X_2' || id='an1_2' || id='an2_2' || id='an3_2'_

id='ins_v_3' || id='X_3' || id='an1_3' || id='an2_3' || id='an3_3'_

id='ins_v_4' || id='X_4' || id='an1_4' || id='an2_4' || id='an3_4'_

都是输入文本。可以启用或禁用#_#。我需要，如果我在任何输入文本 ins_v_# 中按 Tab 键，则转到已启用的下一个输入文本 an#__#，避免输入文本 X_#。

例如我在ins_v_3并且an1_3被禁用，那么如果我按Tab键，焦点必须在下一个未禁用的an#_3中，在这种情况下，由于an1_3被禁用，焦点必须是an2_3。

我在ins_v_2中的另一个例子。如果 an1_2 和 an2_2 被禁用，那么如果我按 Tab，焦点必须位于下一个未禁用的 an#_2 中，在这种情况下，由于 an1_2 和 an2_2 被禁用，焦点必须是 an3_2。

我尝试过，但不知道该怎么做。我试图获取下一个我们不禁用的 id，以便将焦点放在该 id 上:

$j(document).unbind('keydown').bind('keydown', function (event) {
    var src_id = event.srcElement.id
    if(src_id.includes("ins_v_") && event.keyCode === 9){
    var ind = src_id.split("_")[2]
    console.log(ind);
    // for (num=1, num<4;num++ 
    //if($("an"+num+"_"+ind).next().attr("disabled", false)) {
      //  "an"+num+"_"+ind).focus(); }
   // I don't know how to get the next disabe

   }
}

Answer 1

方法如下:

$('[id^="ins_v_"]').on('keydown', function(e) {
    //test for tab key
    if (e.keyCode === 9) {
        //prevent tab from executing
        e.preventDefault();
        //determine the 'row number'
        let num = this.id.split('_').pop();
        //use it to find first non-disabled input and put focus on it
        $('[id^="an"][id$="_' + num + '"]').not('[disabled]')[0].focus();
    }
});

jQuery($ => {
    $('[id^="ins_v_"]').on('keydown', function(e) {
        if (e.keyCode === 9) {
            e.preventDefault();
            $('[id^="an"][id$="_' + this.id.split('_').pop() + '"]').not('[disabled]')[0].focus();
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td><input id='ins_v_1'/></td>
<td><input id='X_1' placeholder='X_1' /></td>
<td><input id='an1_1' disabled /></td>
<td><input id='an2_1' /></td>
<td><input id='an3_1' /></td>
</tr>
<tr>
<td><input id='ins_v_2' /></td>
<td><input id='X_2' placeholder='X_2' /></td>
<td><input id='an1_2' disabled /></td>
<td><input id='an2_2' disabled /></td>
<td><input id='an3_2' /></td>
</tr>
</tbody>
</table>