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,

Molest

possible duplicate of Enter key press behaves like a Tab in Javascript – Transfusion

Good merge candidate since this question is asking for jQuery solutions specifically. – Gibbeon

answer for Andrew Whitaker is really nice and not founded in other question similar or related. – Linguistic

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.

Bewray

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.

Metcalf

Welcome to stackoverflow.com, thanks for your help. Please keep in mind to describe your answer too. – Adkison

Works on Chrome too – Stickweed

Answer 3

I've had a similar problem, where I wanted to press + on the numpad to tab to the next field. Now I've released a library that I think will help you.

PlusAsTab: A jQuery plugin to use the numpad plus key as a tab key equivalent.

Since you want enter/↵ instead, you can set the options. Find out which key you want to use with the jQuery event.which demo.

JoelPurra.PlusAsTab.setOptions({
  // Use enter instead of plus
  // Number 13 found through demo at
  // https://api.jquery.com/event.which/
  key: 13
});

Sample HTML

<!-- Enable enter as tab as the default for all fields in this form -->
<form data-plus-as-tab="true">
  <input type="text" value="Enter skips to the next field" autofocus="autofocus" />
  <!-- Exclude this textarea -->
  <textarea data-plus-as-tab="false">Enter works as usual</textarea>
  <input type="text" value="Enter skips to the next field" />
  <select><option>Enter skips here too</option></select>
  <!-- Exclude this submit button -->
  <button type="submit" data-plus-as-tab="false">Enter works as usual</button>
</form>

As you can see, it's easy to enable all elements in a container with data-plus-as-tab="true", and it's easy to exclude specific elements with data-plus-as-tab="false". You can also exclude certain types (on existing elements) from javascript with $('textarea, :button').plusAsTab(false);.

You can try it out yourself in the PlusAsTab enter as tab demo.

Deity

Answer 4

How to check form element is displayed in this case? I have a many input(text box, radio button,) but some elements are displayed, some elements not displayed

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

Truth

Welcome to StackOverflow. If you have a question please ask a new question – Schoolboy

Answer 5

The easiest way to solve this problem with the focus function of JavaScript is as follows:

You can copy it and try it @ home!

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

    <input id="input1" type="text" onkeypress="pressEnter()" />
    <input id="input2" type="text" onkeypress="pressEnter2()" />
    <input id="input3" type="text"/>

    <script type="text/javascript">
    function pressEnter() {
      // Key Code for ENTER = 13
      if ((event.keyCode == 13)) {
        document.getElementById("input2").focus({preventScroll:false});
      }
    }
    function pressEnter2() {
      if ((event.keyCode == 13)) {
        document.getElementById("input3").focus({preventScroll:false});
      }
    }
    </script>

  </body>
</html>

Launch