CODEWITHSUNDEEP
javascriptjquery
user5249203
user5249203

Reputation: 4648

enter key to follow the tabindex (in scenario where enter key is changed to behave as tab)

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.net/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

Upvotes: 1

Views: 8131

Answers (1)

Dekel
Dekel

Reputation: 62626

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.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 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 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>

Upvotes: 3

Related Questions