使用JavaScript或jquery实现箭头键

Question

我有一个jsp页面，我想在页面中实现上下左右键功能。 我有以下代码，但它也会访问只读文本框。 我想跳过该只读输入。 请检查随附的快照。 我有A，B，C，D，E，F，G，H输入，但E和F是只读的。 我的光标在C上。假设如果我按下键（code = 40），那么它应该通过跳过E和F转到G。 请检查此链接的图像：

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

修改您的jquery选择器以排除禁用的元素。

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

Answer 2

您可以使用: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' />