Реализация клавиш со стрелками с использованием JavaScript или jquery

Question

У меня есть страница jsp, я хочу реализовать функциональность клавиш вверх-вниз-влево-вправо на странице. У меня есть следующий код, но он также посещает текстовое поле readonly. Я хочу пропустить эти входы только для чтения. Проверьте прикрепленную привязку. У меня есть входы A, B, C, D, E, F, G, H, но E и F - только для чтения. Мой курсор находится на C. Предположим, что если я нажимаю клавишу (код = 40), тогда она должна перейти в G, пропуская E и F. То же самое с другим. Пожалуйста, проверьте эту ссылку на изображение:

https://www.dropbox.com/s/ptm483avp8pm9sg/Untitled.png?dl=0

$(document).ready(function(){ 
    $("input,textarea").keydown(function(e) {  
    if (e.keyCode==37 || e.keyCode==38) { 
      $(":input,textarea,select")[$(":input,select").index(document.activeElement) - 1].focus();    
    } 
    if (e.keyCode==39 || e.keyCode==40) { 
      $(":input,textarea,select")[$(":input,select").index(document.activeElement) + 1 ].focus();   
    } 
}); 
}); 

Answer 1

Вы можете использовать селектор :not([readonly]). Например:

$(document).ready(function(){ 
 
    $("input,textarea").keydown(function(e) { 
 
    if (e.keyCode==37 || e.keyCode==38) { 
 
     $(":input:not([readonly]),textarea,select")[$(":input:not([readonly]),select").index(document.activeElement) - 1].focus(); 
 
    } 
 
    if (e.keyCode==39 || e.keyCode==40) { 
 
     $(":input:not([readonly]),textarea,select")[$(":input:not([readonly]),select").index(document.activeElement) + 1 ].focus(); 
 
    } 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='text' value='A' /> 
 
<input type='text' value='B' /> 
 
<input type='text' value='C' /> 
 
<input type='text' value='D' /> 
 
<input type='text' value='E' readonly /> 
 
<input type='text' value='F' readonly /> 
 
<input type='text' value='G' /> 
 
<input type='text' value='H' />

Answer 2

Измените селектор JQuery, чтобы исключить отключенные элементы.

$(":input,select").not(":disabled").index(...