Enter a key to keep tabs on tabindex (in a scenario where the input key changes to behave like a tab)

Question

I have a 3x3 table inside the form. By default, the tab key moves the cursor in horizontal directions along these input fields. When a tab index is specified (as in the example below), the tab key moves the cursor columns wise, not string, as needed.

With various sources from SO answers, I came up with jQuery to use the input key as a tab. But, I could not understand how to follow tabindex, as achieved above, that is, by pressing the enter key instead of the cursor moving along a row of lines, I want it to move along the column. The following is what I still have, any help is appreciated.

Demonstration of how it works at the moment. http://jsfiddle.net/unCu5/125/

Source below code: jquery how to catch input 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's solution works for the displayed html script, but I have a different type of HTML to view. How to fix it?

Answer 1

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

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

Check out 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.com/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 does not support returning from the last entry to the first. You will need to write it explicitly.

Updated version - fix incorrect tabindex values

The original question did not mention that tabindex may or may not have sequential values. This code will “fix” the tabindex values ​​based on the order in the AND code of the tabindex values. 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 compare 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.org/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.com/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> 

Answer 2

It doesn’t work when I go, as it goes 87,88,89,91