Enter key press behaves like a Tab in Javascript

Question

I m looking to create a form where pressing the enter key causes focus to go to the  next  form element on the page  The solution I keep finding on the web is       lt body onkeydown  if event keyCode  13  event keyCode 9  return event keyCode   gt    Unfortunately  that only seems to work in IE  So the real meat of this question is if anybody knows of a solution that works for FF and Chrome  Additionally  I d rather not have to add onkeydown events to the form elements themselves  but if that s the only way  it will have to do   This issue is similar to question 905222  but deserving of it s own question in my opinion   Edit  also  I ve seen people bring up the issue that this isn t good style  as it diverges from form behavior that users are used to  I agree  It s a client request

User · Answer

There are problems with all of the implementations given here. Some don't work properly with textareas and submit buttons, most don't allow you to use shift to go backwards, none of them use tabindexes if you have them, and none of them wrap around from the last to the first or the first to the last.

To have the [enter] key act like the [tab] key but still work properly with text areas and submit buttons use the following code. In addition this code allows you to use the shift key to go backwards and the tabbing wraps around front to back and back to front.

Source code: https://github.com/mikbe/SaneEnterKey

CoffeeScript

mbsd_sane_enter_key = ->
  input_types = "input, select, button, textarea"
  $("body").on "keydown", input_types, (e) ->
    enter_key = 13
    tab_key = 9

    if e.keyCode in [tab_key, enter_key]
      self = $(this)

      # some controls should just press enter when pressing enter
      if e.keyCode == enter_key and (self.prop('type') in ["submit", "textarea"])
        return true

      form = self.parents('form:eq(0)')

      # Sort by tab indexes if they exist
      tab_index = parseInt(self.attr('tabindex'))
      if tab_index
        input_array = form.find("[tabindex]").filter(':visible').sort((a,b) -> 
          parseInt($(a).attr('tabindex')) - parseInt($(b).attr('tabindex'))
        )
      else
        input_array = form.find(input_types).filter(':visible')

      # reverse the direction if using shift
      move_direction = if e.shiftKey then -1 else 1
      new_index = input_array.index(this) + move_direction

      # wrap around the controls
      if new_index == input_array.length
        new_index = 0
      else if new_index == -1
        new_index = input_array.length - 1

      move_to = input_array.eq(new_index)
      move_to.focus()
      move_to.select()

      false

$(window).on 'ready page:load', ->
  mbsd_sane_enter_key()

JavaScript

var mbsd_sane_enter_key = function() {
  var input_types;
  input_types = "input, select, button, textarea";

  return $("body").on("keydown", input_types, function(e) {
    var enter_key, form, input_array, move_direction, move_to, new_index, self, tab_index, tab_key;
    enter_key = 13;
    tab_key = 9;

    if (e.keyCode === tab_key || e.keyCode === enter_key) {
      self = $(this);

      // some controls should react as designed when pressing enter
      if (e.keyCode === enter_key && (self.prop('type') === "submit" || self.prop('type') === "textarea")) {
        return true;
      }

      form = self.parents('form:eq(0)');

      // Sort by tab indexes if they exist
      tab_index = parseInt(self.attr('tabindex'));
      if (tab_index) {
        input_array = form.find("[tabindex]").filter(':visible').sort(function(a, b) {
          return parseInt($(a).attr('tabindex')) - parseInt($(b).attr('tabindex'));
        });
      } else {
        input_array = form.find(input_types).filter(':visible');
      }

      // reverse the direction if using shift
      move_direction = e.shiftKey ? -1 : 1;
      new_index = input_array.index(this) + move_direction;

      // wrap around the controls
      if (new_index === input_array.length) {
        new_index = 0;
      } else if (new_index === -1) {
        new_index = input_array.length - 1;
      }

      move_to = input_array.eq(new_index);
      move_to.focus();
      move_to.select();
      return false;
    }
  });
};

$(window).on('ready page:load', function() {
  mbsd_sane_enter_key();
}

User · Answer

Map  Enter  key to work like the  Tab  key  I ve rewritten Andre Van Zuydam s answer  which didn t work for me  in jQuery   This caputures both Enter and Shift Enter   Enter tabs forward  and Shift Enter tabs back   I ve also rewritten the way self is initialized by the current item in focus   The form is also selected that way   Here s the code      Map  Enter  key to work like the  Tab  key    Daniel P  Clark 2014     Catch the keydown for the entire document   document  keydown function e          Set self as the current item in focus   var self       focus             Set the form by the current item in focus       form   self parents  form eq 0           focusable        Array of Indexable Tab-able items   focusable   form find  input a select button textarea div contenteditable true    filter   visible       function enterKey        if  e which     13  amp  amp   self is  textarea div contenteditable true           Enter  key           If not a regular hyperlink button textarea       if    inArray self  focusable   amp  amp    self is  a button                 Then prevent the default  Enter  key behaviour from submitting the form         e preventDefault               Otherwise follow the link button as by design  or put new line in textarea           Focus on the next item  either previous or next depending on shift        focusable eq focusable index self     e shiftKey   -1   1   focus           return false                 We need to capture the  Shift  key and check the  Enter  key either way    if  e shiftKey    enterKey     else   enterKey           The reason textarea  is included is because we  do  want to tab into it   Also  once in  we don t want to stop the default behavior of Enter from putting in a new line   The reason a and button  allow the default action   and  still focus on the next item  is because they don t always load another page   There can be a trigger effect on those such as an accordion or tabbed content   So once you trigger the default behavior  and the page does its special effect  you still want to go to the next item since your trigger may have well introduced it

User · Answer

If you can I would reconsider doing this  the default action of pressing  lt Enter gt  while in a form submits the form and anything you do to change this default action   expected behaviour could cause some usability issues with the site

User · Answer

You could programatically iterate the form elements adding the onkeydown handler as you go  This way you can reuse the code

User · Answer

You can use my code below  tested in Mozilla  IE  and Chrome         Use to act like tab using enter key       fn enterkeytab function               this  on  keydown    input  select    function e            var self     this              form   self parents  form eq 0                focusable             next                         if  e keyCode    13                    focusable   form find  input a select button   filter   visible                    next   focusable eq focusable index this  1                   if  next length                        next focus                      else                       alert  wd                          form submit                                      return false                                     How to Use          form   enterkeytab       enter key tab

User · Answer

Easiest way to solve this problem with the focus function of JavaScript as follows   You can copy and try it   home    lt  DOCTYPE html gt   lt html lang  en  dir  ltr  gt     lt head gt       lt meta charset  utf-8  gt       lt title gt  lt  title gt     lt  head gt     lt body gt        lt input id  input1  type  text  onkeypress  pressEnter      gt       lt input id  input2  type  text  onkeypress  pressEnter2      gt       lt input id  input3  type  text   gt        lt script type  text javascript  gt      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                       lt  script gt      lt  body gt   lt  html gt

User · Answer

The simplest vanilla JS snippet I came up with   document addEventListener  keydown   function  event      if  event keyCode     13  amp  amp  event target nodeName      INPUT         var form   event target form      var index   Array prototype indexOf call form  event target       form elements index   1  focus        event preventDefault              Works in IE 9  and modern browsers

User · Answer

I reworked the OPs solution into a Knockout binding and thought I d share it  Thanks very much  -   Here s a Fiddle    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml   gt   lt head gt       lt script src  http   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  type  text javascript  gt  lt  script gt       lt script src  http   ajax aspnetcdn com ajax knockout knockout-2 2 1 js  type  text javascript  gt  lt  script gt     lt  head gt   lt body gt        lt div data-bind  nextFieldOnEnter true  gt           lt input type  text    gt           lt input type  text    gt           lt select gt             lt option value  volvo  gt Volvo lt  option gt             lt option value  saab  gt Saab lt  option gt             lt option value  mercedes  gt Mercedes lt  option gt             lt option value  audi  gt Audi lt  option gt           lt  select gt           lt input type  text    gt           lt input type  text    gt       lt  div gt         lt script type  text javascript  gt      ko bindingHandlers nextFieldOnEnter             init  function element  valueAccessor  allBindingsAccessor                  element  on  keydown    input  select   function  e                    var self     this                    form     element                      focusable                     next                                   if  e keyCode    13                        focusable   form find  input a select button textarea   filter   visible                        var nextIndex   focusable index this     focusable length -1   0   focusable index this    1                      next   focusable eq nextIndex                       next focus                        return false                                                          ko applyBindings           lt  script gt   lt  body gt   lt  html gt

User · Answer

function return2tab  div        document addEventListener  keydown   function  ev            if  ev key      quot Enter quot   amp  amp  ev target nodeName      INPUT                  var focusableElementsString    a href   area href   input not  disabled    select not  disabled    textarea not  disabled    button not  disabled    iframe  object  embed   tabindex  quot 0 quot     contenteditable                 let ol  div querySelectorAll focusableElementsString                for  let i 0  i lt ol length  i                      if  ol i      ev target                        let o  i lt ol length-1  ol i 1   o 0                       o focus    break                                              ev preventDefault

User · Answer

Changing this behaviour actually creates a far better user experience than the default behaviour implemented natively   Consider that the behaviour of the enter key is already inconsistent from the user s point of view  because in a single line input  enter tends to submit a form  while in a multi-line textarea  it simply adds a newline to the contents of the field   I recently did it like this  uses jQuery       input enterastab  select enterastab  textarea enterastab   live  keydown   function e     if  e keyCode  13      var focusable      input a select button textarea   filter   visible      focusable eq focusable index this  1  focus      return false           This is not terribly efficient  but works well enough and is reliable - just add the  enterastab  class to any input element that should behave in this way

User · Answer

Here s what I came up with    form addEventListener  submit    e    gt      On Submit  let key   e charCode    e keyCode    0   get the key code  if  key   13      If enter key     e preventDefault       const inputs   Array from document querySelectorAll  form input      Get array of inputs     let nextInput   inputs inputs indexOf document activeElement    1    get index of input after the current input     nextInput focus     focus new input

User · Answer

form input   select   textarea   keypress function e       if e keyCode    13           var enter position     this  index                form input   select   textarea   eq enter position 1  focus

User · Answer

In all that cases  only works in Chrome and IE  I added the following code to solve that   var key    window event    e keyCode   e which   and I tested the key value on if keycode equals 13         body   on  keydown    input  select  textarea   function  e        var self     this          form   self parents  form eq 0            focusable         next            var key    window event    e keyCode   e which       if  key    13            focusable   form find  input a select button textarea   filter   visible            next   focusable eq focusable index this    1           if  next length                next focus              else               focusable click                      return false

User · Answer

Many answers here uses e keyCode and e which that are deprecated   Instead you should use e key      Enter    Documentation  https   developer mozilla org en-US docs Web API KeyboardEvent keyCode   I m sorry but I can t test these snippets just now  Will come back later after testing it    With HTML    lt body onkeypress  if event key    Enter   amp  amp  event target form  focusNextElement event   return false    gt    With jQuery     window  on  keypress   function  ev        if  ev key      Enter   amp  amp  ev currentTarget form  focusNextElement ev      And with Vanilla JS   document addEventListener  keypress   function  ev        if  ev key      Enter   amp  amp  ev currentTarget form  focusNextElement ev         You can take focusNextElement   function from here  https   stackoverflow com a 35173443 3356679

User · Answer

I have it working in only JavaScript   Firefox won t let you update the keyCode  so all you can do is trap keyCode 13 and force it to focus on the next element by tabIndex as if keyCode 9 was pressed   The tricky part is finding the next tabIndex   I have tested this only on IE8-IE10 and Firefox and it works   function ModifyEnterKeyPressAsTab event        var caller      var key      if  window event                caller   window event srcElement    Get the event caller in IE          key   window event keyCode    Get the keycode in IE            else               caller   event target    Get the event caller in Firefox          key   event which    Get the keycode in Firefox            if  key    13    Enter key was pressed                cTab   caller tabIndex    caller tabIndex          maxTab   0    highest tabIndex  start at 0 to change          minTab   cTab    lowest tabIndex  this may change  but start at caller          allById   document getElementsByTagName  input      Get input elements          allByIndex         Storage for elements by index          c   0    index of the caller in allByIndex  start at 0 to change          i   0    generic indexer for allByIndex          for  id in allById    Loop through all the input elements by id                        allByIndex i    allById id     Set allByIndex              tab   allByIndex i  tabIndex              if  caller    allByIndex i                   c   i    Get the index of the caller              if  tab  gt  maxTab                  maxTab   tab    Get the highest tabIndex on the page              if  tab  lt  minTab  amp  amp  tab  gt   0                  minTab   tab    Get the lowest positive tabIndex on the page              i                        Loop through tab indexes from caller to highest          for  tab   cTab  tab  lt   maxTab  tab                            Look for this tabIndex from the caller to the end of page              for  i   c   1  i  lt  allByIndex length  i                                  if  allByIndex i  tabIndex    tab                                        allByIndex i  focus      Move to that element and stop                      return                                                Look for the next tabIndex from the start of page to the caller              for  i   0  i  lt  c  i                                  if  allByIndex i  tabIndex    tab   1                                        allByIndex i  focus      Move to that element and stop                      return                                                Continue searching from the caller for the next tabIndex                       The caller was the last element with the highest tabIndex            so find the first element with the lowest tabIndex          for  i   0  i  lt  allByIndex length  i                          if  allByIndex i  tabIndex    minTab                                allByIndex i  focus      Move to that element and stop                  return                                    To use this code  add it to your html input tag    lt input id  SomeID  onkeydown  ModifyEnterKeyPressAsTab event         gt    Or add it to an element in javascript   document getElementById  SomeID   onKeyDown   ModifyEnterKeyPressAsTab    A couple other notes   I only needed it to work on my input elements  but you could extend it to other document elements if you need to   For this  getElementsByClassName is very helpful  but that is a whole other topic   A limitation is that it only tabs between the elements that you have added to your allById array   It does not tab around to the other things that your browser might  like toolbars and menus outside your html document   Perhaps this is a feature instead of a limitation   If you like  trap keyCode 9 and this behavior will work with the tab key too

User · Answer

Here is an angular js directive to make enter go to the next field using the other answers as inspiration  There is some  perhaps  odd looking code here because I only use the jQlite packaged with angular  I believe most of the features here work in all browsers   IE8   angular module  myapp        directive  pdkNextInputOnEnter   function         var includeTags     INPUT    SELECT         function link scope  element  attrs            element on  keydown   function  e                   Go to next form element on enter and only for included tags             if  e keyCode    13  amp  amp  includeTags indexOf e target tagName     -1                       Find all form elements that can receive focus                 var focusable   element 0  querySelectorAll  input select button textarea                        Get the index of the currently focused element                 var currentIndex   Array prototype indexOf call focusable  e target                      Find the next items in the list                 var nextIndex   currentIndex    focusable length - 1   0   currentIndex   1                      Focus the next element                 if nextIndex  gt   0  amp  amp  nextIndex  lt  focusable length                      focusable nextIndex  focus                     return false                                       return           restrict   A           link  link              Here s how I use it in the app I m working on  by just adding the pdk-next-input-on-enter directive on an element  I am using a barcode scanner to enter data into fields  the default function of the scanner is to emulate a keayboard  injecting an enter key after typing the data of the scanned barcode   There is one side-effect to this code  a positive one for my use-case   if it moves focus onto a button  the enter keyup event will cause the button s action to be activated  This worked really well for my flow as the last form element in my markup is a button that I want activated once all the fields have been  tabbed  through by scanning barcodes    lt  DOCTYPE html gt   lt html ng-app myapp gt     lt head gt         lt script src  angular min js  gt  lt  script gt         lt script src  controller js  gt  lt  script gt     lt  head gt     lt body ng-controller  LabelPrintingController  gt         lt div class   container  pdk-next-input-on-enter gt             lt select ng-options  p for p in partNumbers  ng-model  selectedPart  ng-change  selectedPartChanged    gt  lt  select gt             lt h2 gt   labelDocument SerialNumber   lt  h2 gt             lt div ng-show  labelDocument ComponentSerials  gt                 lt b gt Component Serials lt  b gt                 lt ul gt                     lt li ng-repeat  serial in labelDocument ComponentSerials  gt                          serial name   lt br  gt                         lt input type  text  ng-model  serial value    gt                     lt  li gt                 lt  ul gt             lt  div gt             lt button ng-click  printLabel    gt Print lt  button gt         lt  div gt     lt  body gt   lt  html gt

User · Answer

Vanilla js with support for Shift   Enter and ability to choose which HTML tags are focusable  Should work IE9      onKeyUp e        switch  e keyCode          case 13    Enter         var focusableElements   document querySelectorAll  input  button           var index   Array prototype indexOf call focusableElements  document activeElement          if e shiftKey            focus focusableElements  index - 1          else           focus focusableElements  index   1           e preventDefault           break            function focus elements  index          if elements index           elements index  focus

User · Answer

Try this       document  ready function            fn enterkeytab   function                this  on  keydown    input select text button   function  e                var self     this                  form   self parents  form eq 0                    focusable                 next                           if  e keyCode    13                    focusable   form find  input a select   filter   visible                    next   focusable eq focusable index this    1                   if  next length                          if disable try get next 10 fields                     if  next is   disabled                             for i 2 i lt 10 i                                 next   focusable eq focusable index this    i                               if   next is   disabled                                    break                                                                      next focus                                      return false                                         form   enterkeytab

User · Answer

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  crarr  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         Matches all inputs with name  a     needs some character escaping     input name a          plusAsTab      You can try it out yourself in the PlusAsTab enter as tab demo

User · Answer

I had a simular need  Here is what I did      lt script type  text javascript  language  javascript  gt      function convertEnterToTab           if event keyCode  13            event keyCode   9                    document onkeydown   convertEnterToTab         lt  script gt

User · Answer

This worked for me     document  on  keydown     tabbable   function e         if  e key      Enter             e preventDefault             var  canfocus       tabbable visible            var index    canfocus index document activeElement    1           if  index  gt    canfocus length  index   0           canfocus eq index  focus

User · Answer

Thank you for the good script   I have just added the shift event on the above function to go back between elements  I thought someone may need this      body   on  keydown    input  select  textarea   function e    var self     this      form   self parents  form eq 0        focusable     next     prev      if  e shiftKey     if  e keyCode    13         focusable     form find  input a select button textarea   filter   visible         prev   focusable eq focusable index this -1          if  prev length            prev focus           else           form submit                  else if  e keyCode    13        focusable   form find  input a select button textarea   filter   visible        next   focusable eq focusable index this  1       if  next length            next focus          else           form submit              return false

User · Answer

I used the logic suggested by Andrew which is very effective  And this is my version      body   on  keydown    input  select   function e        if  e key      Enter             var self     this   form   self parents  form eq 0     focusable  next          focusable   form find  input a select button textarea   filter   visible            next   focusable eq focusable index this  1           if  next length                next focus              else               form submit                      return false              KeyboardEvent s keycode  i e  e keycode  depreciation notice  - https   developer mozilla org en-US docs Web API KeyboardEvent keyCode

[javascript] Enter key press behaves like a Tab in Javascript

CoffeeScript

JavaScript

Examples related to javascript

Examples related to html

Examples related to cross-browser

Examples related to dom-events