How to Convert An Enter Key Press Into A Tab Key Press For Web Pages

Question

The enter key press should work like a Tab key press.The enter key press for TextArea and Submit Button should work as usual.Focus should skip from the next element when the next field is disabled/readonly.

thanks,

Answer 1

First off, this is probably not a great idea usability-wise. However, here's something that should work:

$(":input").on("keydown", function(event) {
    if (event.which === 13 && !$(this).is("textarea, :button, :submit")) {
        event.stopPropagation();
        event.preventDefault();

        $(this)
            .nextAll(":input:not(:disabled, [readonly='readonly'])")
            .first()
            .focus();
    }
});

Example: http://jsfiddle.net/NDcrk/

The piece that finds the next input may have to change, depending on your markup.

Answer 2

This solution work for me. Tested it on IE and FireFox.

<script type="text/javascript">
    function tabE(obj, e) {
        var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz 
        if (e.keyCode == 13) {
            var ele = document.forms[0].elements;
            for (var i = 0; i < ele.length; i++) {
                var q = (i == ele.length - 1) ? 0 : i + 1; // if last element : if any other 
                if (obj == ele[i]) {
                    ele[q].focus();
                    break
                }
            }
            return false;
        }
    }
</script>

<form METHOD="POST">
    <input name="" type="text" onkeypress="return tabE(this,event)">
    <br>
    <input name="" type="text" onkeypress="return tabE(this,event)">
    <br>
    <input name="" type="text" onkeypress="return tabE(this,event)">
    <br>
    <INPUT TYPE="submit" Value="Ok">
</form>

I found it here.