Implementation of Arrow keys using JavaScript or jquery

Question

I have a jsp page, i want to implement up-down-left-right key functionality into page. i have following code but it visits the readonly text box as well. i want to skip that readonly inputs. Please check attached snap. I have A,B,C,D,E,F,G,H inputs but E and F are the readonly. My cursor is on C. suppose if i press down key (code=40) then it should go to G by skipping E and F.Same with other as well. Please check this link for image:

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();           
     }
 }); 
});

score 0 · Answer 1 · answered Sep 23 '15 at 18:55

0

Modify your jquery selector to exclude the disabled elements.

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

answered Sep 23 '15 at 18:55

Jake

822
5
14

Thank you very Much...Working fine... Plz tell me one more suggestion if i press down key then it should go to down, if i press right it should go to next same if i press up key then it should go to upper and so on.... – CodeFunda Sep 24 '15 at 03:43

score 0 · Accepted Answer · answered Sep 23 '15 at 18:56

You can use the :not([readonly]) selector. E.g:

$(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' />

Thank you very Much...Working fine... Plz tell me one more suggestion if i press down key then it should go to down, if i press right it should go to next same if i press up key then it should go to upper and so on.... — CodeFunda, Sep 24 '15 at 03:44
@CodeFunda if my answer was useful, please, upvote it by clicking on the arrow and mark it as the accepted answer by clicking on the `V`. Thank you! :) — Buzinas, Sep 24 '15 at 12:29

Implementation of Arrow keys using JavaScript or jquery

2 Answers2