CODEWITHSUNDEEP
javascriptkeyeventonkeydown
Heba Gomaah
Heba Gomaah

Reputation: 1215

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

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

Upvotes: 14

Views: 40133

Answers (8)

Griffin
Griffin

Reputation: 851

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

Upvotes: 1

Sunil Acharya
Sunil Acharya

Reputation: 1183

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>

Upvotes: 0

bygrace
bygrace

Reputation: 5988

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

Upvotes: 14

Joshua Espana
Joshua Espana

Reputation: 114

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.

Upvotes: 2

Will P.
Will P.

Reputation: 8787

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

Upvotes: 2

j-u-s-t-i-n
j-u-s-t-i-n

Reputation: 1452

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

Upvotes: -1

Tei
Tei

Reputation: 1416

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

Upvotes: 1

jbabey
jbabey

Reputation: 46647

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>

Upvotes: 2

Related Questions