How to force "enter key" to act as "tab key" using javascript?

Question

I'm working on a site that is full of forms to be filled and I it's required that when escape button is pressed focus move to the next input control, just as pressing "tab" do. I found code to move focus when keypressed is 13 but this need to take the ID of element to focus on

<input id="Text1" type="text" onkeydown="return noNumbers(event)" />
<input id="Text2" type="text" />

<script type="text/javascript">

    function noNumbers(e) {

        keynum = e.which;

        if (keynum == 13)
            document.getElementById("Text2").focus();

    }
</script>

I need a generalized function that when key pressed code is 13 "that is enter" fire the default event of pressing 9 "that is tab", of course in Javascript

Solution 1

This will handle multiple input fields.

Here is the jQuery version: http://jsfiddle.net/TnEB5/3/

$('input').keypress(function(e) {
    if (e.which == 13) {
        $(this).next('input').focus();
        e.preventDefault();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="Text1" type="text"  />
<input id="Text2" type="text" />
<input id="Text3" type="text" />

Here is the pure javascript version: http://jsfiddle.net/TnEB5/5/ (you probably want to get the sibling differently)

function tab(e) {
    if (e.which == 13) {
        e.target.nextSibling.nextSibling.focus();
        e.preventDefault();
    }
}
var inputs = document.getElementsByTagName('input');
for (var x = 0; x < inputs.length; x++)
{
    var input = inputs[x];
    input.onkeypress = tab;
}

<input id="Text1" type="text"  />
<input id="Text2" type="text" />
<input id="Text3" type="text" />

Solution 2

handle keypress instead and return false back to the browser:

http://jsfiddle.net/EeyTL/

<input id="Text1" type="text" />
<input id="Text2" type="text" />

<script type="text/javascript">
    document.getElementById('Text1').onkeypress = function (e) {
        if (e.which === 13) {
            document.getElementById("Text2").focus();
            return false;
        }
    };
</script>

Solution 3

You'll need to explicitly set the tabindex property of the input fields for a generic solution. Something like

<input id="Text1" type="text" tabindex="1" />
<input id="Text2" type="text" tabindex="2" />

<script type="text/javascript">
    $('input').keypress(function(e){
        if(e.which==13){ 
            $("[tabindex='"+($(this).attr("tabindex")+1)+"']").focus();
            e.preventDefault();
        }
    });    
</script>

this solution uses jquery to assign the event handler for all input type elements on the page, sets focus to the element with the next highest tabindex property, and prevents the form from submitting when enter is pressed using e.preventDefault(). Here's a jfiddle

Solution 4

Althought the post is old, I hope my answer can help someone in need. I have a smilar situation:

I have a very large form for an employee scheduler application with different types of input fields. Some of the input fields are hidden sometimes and not other times. I was asked to make the enter key behave as the tab key so the users of the form could use the 10-key when creating thier employees schedule. Here is how I solved my problem:

$(document).ready(function () {
    var allInputs = $(':text:visible'); //(1)collection of all the inputs I want (not all the inputs on my form)
    $(":text").on("keydown", function () {//(2)When an input field detects a keydown event
        if (event.keyCode == 13) {
            event.preventDefault();
            var nextInput = allInputs.get(allInputs.index(this) + 1);//(3)The next input in my collection of all inputs
            if (nextInput) {
                nextInput.focus(); //(4)focus that next input if the input is not null
            }
        }
    });
});

What I had to do was:

1. Create a collection of all the inputs I want to consider when tabbing. in my case it is text inputs that are visible.
2. Listen for a keydown event on the inputs in question, in my case all text field inputs
3. When the enter is pressed on my text input, determine what input is next to be focused.
4. If that input is valid, bring it into focus.

Solution 5

<input type="text" value="" onkeyup="doNext(this);"> a <br>
<input type="text" value="" onkeyup="doNext(this);"> b <br>
<input type="text" value="" onkeyup="doNext(this);"> c <br>

function doNext(el){                   
  if(event.keyCode=='13'){
    var nextEl = el.form.elements[el.tabIndex+1];
    if (nextEl && nextEl.focus) nextEl.focus();
  }
}

View more solutions