I have a 3x3 table within a form. By default tab key moves the cursor in horizontal directions on these input fields. When a tabindex is given ( Like in the example below) the tab key moves cursor columns wise instead of row wise, as I needed.

With various sources from SO answers, I came up with the Jquery to use enter key as tab. But, could not figure out how to follow the tabindex as achieved above , i.e by pressing enter key instead of cursor moving row-wise, i want it to move in column wise. Below is what I have so far, any help is appreciated.

Demo of how it currently works. /

Source of below code: jquery how to catch enter key and change event to tab

<table>
    <tr>
        <td><input tabindex="1" placeholder="1" /></td>
        <td><input tabindex="2" placeholder="2" /></td>
        <td><input tabindex="3" placeholder="3" /></td>
    </tr><tr>
        <td><input tabindex="1" placeholder="1" /></td>
        <td><input tabindex="2" placeholder="2" /></td>
        <td><input tabindex="3" placeholder="3" /></td>
    </tr><tr>
        <td><input tabindex="1" placeholder="1" /></td>
        <td><input tabindex="2" placeholder="2" /></td>
        <td><input tabindex="3" placeholder="3" /></td>
    </tr>
</table>

$('input').live("keypress", function(e) {
  /* ENTER PRESSED*/
  if (e.keyCode == 13) {
    /* FOCUS ELEMENT */
    var inputs = $(this).parents("form").eq(0).find(":input");
    var idx = inputs.index(this);

    if (idx == inputs.length - 1) {
      inputs[0].select()
    } else {
      inputs[idx + 1].focus(); //  handles submit buttons
      inputs[idx + 1].select();
    }
    return false;
  }
})

@Dekel solution work for the html scenario he displayed, but I have a different type of HTML on view source. How do I fix this

I have a 3x3 table within a form. By default tab key moves the cursor in horizontal directions on these input fields. When a tabindex is given ( Like in the example below) the tab key moves cursor columns wise instead of row wise, as I needed.

With various sources from SO answers, I came up with the Jquery to use enter key as tab. But, could not figure out how to follow the tabindex as achieved above , i.e by pressing enter key instead of cursor moving row-wise, i want it to move in column wise. Below is what I have so far, any help is appreciated.

Demo of how it currently works. http://jsfiddle/unCu5/125/

Source of below code: jquery how to catch enter key and change event to tab

<table>
    <tr>
        <td><input tabindex="1" placeholder="1" /></td>
        <td><input tabindex="2" placeholder="2" /></td>
        <td><input tabindex="3" placeholder="3" /></td>
    </tr><tr>
        <td><input tabindex="1" placeholder="1" /></td>
        <td><input tabindex="2" placeholder="2" /></td>
        <td><input tabindex="3" placeholder="3" /></td>
    </tr><tr>
        <td><input tabindex="1" placeholder="1" /></td>
        <td><input tabindex="2" placeholder="2" /></td>
        <td><input tabindex="3" placeholder="3" /></td>
    </tr>
</table>

$('input').live("keypress", function(e) {
  /* ENTER PRESSED*/
  if (e.keyCode == 13) {
    /* FOCUS ELEMENT */
    var inputs = $(this).parents("form").eq(0).find(":input");
    var idx = inputs.index(this);

    if (idx == inputs.length - 1) {
      inputs[0].select()
    } else {
      inputs[idx + 1].focus(); //  handles submit buttons
      inputs[idx + 1].select();
    }
    return false;
  }
})

@Dekel solution work for the html scenario he displayed, but I have a different type of HTML on view source. How do I fix this

• javascript
• jquery

• Possible duplicate of jquery how to catch enter key and change event to tab – Dekel Commented Jul 20, 2016 at 19:41
• @Dekel, my Q is not how to change enter key to tab. I already solved it in the given code above. But, i want that enter key to follow tabindex provided to each input. By default, the enter key moves horizontally ( row-wise) for input fields ( let says for a 3x3 table), But, I want the cursor to move column-wise. So, how to change the default behaviour in JS here ? – user5249203 Commented Jul 20, 2016 at 19:48
• Sorry, now it's more clear :) – Dekel Commented Jul 20, 2016 at 19:59
• put jsfiddle DEMO , then , we can figure out yr pb – Abdennour TOUMI Commented Jul 20, 2016 at 19:59

1 Answer 1

Instead of just focus the next input element, you can find the next element (based on the tabindex) and focus on him:

$('input[tabindex^="2"]');

Check this example:

$(document).ready(function () { // Will only run once the page Document Object Model (DOM) is ready for JavaScript code 
    // Create a jQuery object containing the html element 'input'
    // Create a .not() method to exclude buttons for keypress event
    $(":input:not(:disabled)").not($(":button")).keypress(function(evt) {
        // If the keypress event code is 13 (Enter)
        if (evt.keyCode == 13) {
            // get the attribute type and if the type is not submit
            itype = $(this).prop('type');
            if (itype !== 'submit') {
                currentTabindex = $(this).attr('tabindex');
                if (currentTabindex) {
                    nextInput = $('input[tabindex^="'+ (parseInt(currentTabindex)+1) +'"]');
                    if (nextInput.length) {
                        nextInput.focus();
                        return false;
                    }
                }
            }
        }
    });
});

<script src="http://code.jquery./jquery-latest.min.js"></script>
<table>
    <tr>
        <td><input tabindex="1" placeholder="1" /></td>
        <td><input tabindex="4" placeholder="4" /></td>
        <td><input tabindex="7" placeholder="7" /></td>
    </tr><tr>
        <td><input tabindex="2" placeholder="2" /></td>
        <td><input tabindex="5" placeholder="5" /></td>
        <td><input tabindex="8" placeholder="8" /></td>
    </tr><tr>
        <td><input tabindex="3" placeholder="3" /></td>
        <td><input tabindex="6" placeholder="6" /></td>
        <td><input tabindex="9" placeholder="9" /></td>
    </tr>
</table>

The code doesn't support go back from the last input to the first. You will need to write it explicitly.

Updated version - fix wrong tabindex values

The original question didn't mention that tabindex could repeat or don't have sequential values. This code will "fix" the values of tabindex based on the order in the code AND the values of the tabindex. It will support both repeated tabindex values and non sequential values (1, 2, 3, 6, 7):

function fixTabIndex() {
    // Find all inputs. Their order will be the same order they appear inside your html.
    inputs = $('input');
    // Save the original HTML order of the inputs (we need this to pare their order in the HTML in case or equal two tabindex 
    inputs_original = $('input');
    
    // Sort the inputs by their tabindex values and their position in the DOM
    // More info on Array.prototype.sort: https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
    inputs.sort(function(a, b) {
        if ($(a).attr('tabindex') == $(b).attr('tabindex')) {
            // If tabindex is equal - sort by the position in the DOM
            if (inputs_original.index(a) < inputs_original.index(b)) {
                return -1;
            } else {
                return 1;
            }
        } else if ($(a).attr('tabindex') < $(b).attr('tabindex')) {
            return -1;
        } else {
            return 1;
        }
    });
    // Set the new value of the tabindex based on the position in the sorted array
    inputs.each(function(i, el) {
        $(el).attr('tabindex', i+1);
    });
}

$(document).ready(function () {
    // First we need to fix the tabindex values:
    fixTabIndex();
    $("input").keypress(function(evt) {
        // If the keypress event code is 13 (Enter)
        if (evt.keyCode == 13) {
            // Make sure this is not a submit input
            if ($(this).prop('type') !== 'submit') {
                currentTabindex = $(this).attr('tabindex');
                if (currentTabindex) {
                    nextInput = $('input[tabindex^="'+ (parseInt(currentTabindex)+1) +'"]');
                    if (nextInput.length) {
                        nextInput.focus();
                        return false;
                    }
                }
            }
        }
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
    <tr>
        <td><input tabindex="1" placeholder="1" /></td>
        <td><input tabindex="2" placeholder="2" /></td>
        <td><input tabindex="3" placeholder="3" /></td>
    </tr><tr>
        <td><input tabindex="1" placeholder="1" /></td>
        <td><input tabindex="2" placeholder="2" /></td>
        <td><input tabindex="3" placeholder="3" /></td>
    </tr><tr>
        <td><input tabindex="1" placeholder="1" /></td>
        <td><input tabindex="2" placeholder="2" /></td>
        <td><input tabindex="3" placeholder="3" /></td>
    </tr>
</table>