Как go, чтобы следующий текст ввода не отключен, избегая ввода текста между? - PullRequest
Новая
       51

Как go, чтобы следующий текст ввода не отключен, избегая ввода текста между?

0 голосов
/ 01 мая 2020

У меня есть табличная форма с множеством переменных, например:

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' _

Все тексты являются входными. # _ # может быть включен или отключен. Мне нужно, чтобы, если я нажимаю клавишу Tab в любом входном тексте ins_v_ # go, чтобы перейти к следующему входному тексту # __ #, который включен, избегая ввода текста X_ #.

Например, я нахожусь в ins_v_3, и an1_3 отключен, тогда, если я нажимаю tab, фокус должен быть в следующем # _3, который не отключен, в этом случае, когда an1_3 отключен, фокус должен быть an2_3 .

Еще один пример - я в ins_v_2. Если an1_2 и an2_2 отключены, то если я нажимаю клавишу табуляции, фокус должен быть в следующем # _2, который не отключен, в этом случае, когда an1_2 и an2_2 отключены, фокус должен быть an3_2.

Я пробовал это, но я не знаю, как это сделать. Я пытался получить следующий идентификатор, который мы не отключаем, чтобы сфокусироваться на этом идентификаторе: 

$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

   }
}

1 Ответ

1 голос
/ 01 мая 2020

Вот как: 

$('[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>
...