I want to use the arrow keys to navigate between the input text fields in my form (next, previous). I found this simple method to implement it: link to it but for me it doesn't work... I tried it in the HEAD and in the BODY after the FORM as well, but no luck...

I think the problem could be, that my form is send back to the page via AJAX...

I'm not that familiar with jQuery, can someone please help me out here?

This is the jQuery code:

<script>
$(document).ready(function(){
$('input').keyup(function(e){
if(e.which==39)
$(this).closest('td').next().find('input').focus();
else if(e.which==37)
$(this).closest('td').prev().find('input').focus();
else if(e.which==40)
$(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();
else if(e.which==38)
$(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();
});
});
</script>

I want to use the arrow keys to navigate between the input text fields in my form (next, previous). I found this simple method to implement it: link to it but for me it doesn't work... I tried it in the HEAD and in the BODY after the FORM as well, but no luck...

I think the problem could be, that my form is send back to the page via AJAX...

I'm not that familiar with jQuery, can someone please help me out here?

This is the jQuery code:

<script>
$(document).ready(function(){
$('input').keyup(function(e){
if(e.which==39)
$(this).closest('td').next().find('input').focus();
else if(e.which==37)
$(this).closest('td').prev().find('input').focus();
else if(e.which==40)
$(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();
else if(e.which==38)
$(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();
});
});
</script>

• javascript
• jquery
• html

• What is your HTML looks like. I guess you would not be following the right structure of table. – Talha Ahmed Khan Commented Nov 6, 2012 at 9:50
• Alternative link: jonlabelle./snippets/view/html/… – Paolo Commented Aug 10, 2016 at 8:02

4 Answers 4

if your inputs are dynamically created after domready event you should change

$('input').keyup(function(e){
   ...

into

$('body').on('keyup', 'input', function(e) {
   ...

doing so the keyup event will be captured on body element using event delegation

For further info see the documentation here: http://api.jquery./on/

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler...

If your script is loaded before the form is on the page then the keyup binding would not be able to bind on load. Try using:

$('input').live('keyup', function(e) { code here });

Just in case you want to bind more than one event, this is how you do it:

$('body').on({
    'keyup' : function(e) {
        ...
    },

    'keydown' : function(e) {
        ...
    }
}, 'input');

Also 'body' can be swapped with any parent element of 'input' that will not be dynamically added to the page (i.e. it exists on page load). So if you have some div containing each input, you might want to bind that instead.

I've got a slight improvement to the code above. The problem with the code is that you cannot navigate inside an input field. E.g. you have a value of '100.00|' with the cursor currently at the end (indicated with |). If you press the left key it will jump to the prev input field instead of moving the caret by one position to '100.0|0'.

In order to do that you need to check the current caret position with e.target.selectionStart. But you also need the prev caret position as otherwise you can't identify whether the caret went from 1 to 0 (no jump) or the caret was already on 0 and the user pressed left again (jump).

Another change I've added is that only input fields with the class tableInput are considered. In case you want to exclude some fields.

function(e){
        var charPos = e.target.selectionStart;
    var strLength = e.target.value.length;
    var prevPos = $(this).data('prevPos');
    if(e.which==39){
                //only go right if we really reached the end, that means the prev pos is the same then the current pos
        if(charPos==strLength && (prevPos ==null || prevPos == charPos)){
            $(this).closest('td').next().find('input.tableInput').focus();
            $(this).data('prevPos',null);
        }else{
            $(this).data('prevPos',charPos);
        }
    }else if(e.which==37){
//only go left if we really reached the beginning, that means the prev pos is the same then the current pos
        if(charPos == 0 && (prevPos ==null || prevPos == charPos)){
            $(this).closest('td').prev().find('input.tableInput').focus();
            $(this).data('prevPos',null);
        }else{
            $(this).data('prevPos',charPos);
        }
    }else if(e.which==40){
        $(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input.tableInput').focus();
        $(this).data('prevPos',null);

    }else if(e.which==38){
        $(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input.tableInput').focus();
        $(this).data('prevPos',null);
    }
    });