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

Mosquito

So pressing the return / enter key won't submit the form? – Gobetween

I think you need to first prevent the default action of the enter key (developer.mozilla.org/en/DOM/event.preventDefault) and then do whatever you wanna do – Lentz

Similar to the post https://mcmap.net/q/397698/-changing-the-keypress. – Davies

did you mean "enter" rather than "escape" in your first sentence? – Ridiculous

joelpurra.com/projects/plusastab – Palgrave

Answer 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" />

Ridiculous

jQuery was not mentioned by the OP. – Asterisk

Yes, but he didn't say it wasn't and it isn't hard to add. Using jQuery would provide a more flexible solution easier. – Ridiculous

I added the javascript version. – Ridiculous

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

Cable

Answer 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

Bloodsucker

$(this).attr("tabindex")+1 is wrong because it adds the tabindex as a string ("1"+1 = "11"), this works: parseInt($(this).attr("tabindex"))+1 – Discography

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

Bradawl

Answer 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();
  }
}

Hollywood

Answer 6

Here is a easy solution for you. Basically you include the enter2tab.js file and then add the enter2tab class on each object where you want enter to be treated as a tab.

https://github.com/AndreasGrip/enter2tab

You can obviously look at the code to understand what it does and how..

Krell

Answer 7

I am using this code for advancing to next input field. I hate to press TAB key. And this solution works in IE & 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> 

HTML Content

<form id="main">
     <input name="" type="text" onkeypress="return tabE(this,event)">
     <input type="submit" value="Ok">
</form>

Layby

Answer 8

I believe using e.preventDefault(); is safer than returning false.

Myrmeco