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

Question

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

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(...