jquery how to catch enter key and change event to tab

Question

I want a jquery solution  I must be close  what needs to be done      html   bind  keypress   function e         if e keyCode    13                  return e keyCode   9    set event key to tab              I can return false and it prevents the enter key from being pressed  I thought I could just change the keyCode  to 9 to make it tab but it doesn t appear to work  I ve got to be close  what s going on

User · Answer

I need to go next only to input and select, and element have to be focusable. This script works better for me:

$('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,select,textarea').filter(':visible');
        next = focusable.eq(focusable.index(this)+1);
        if (next.length) {
            next.focus();
        } else {
            form.submit();
        }
        return false;
    }
});

Maybe it helps someone.

User · Answer

PlusAsTab  A jQuery plugin to use the numpad plus key as a tab key equivalent    PlusAsTab is also configurable to use the enter key as in this demo  See some of my older answers to this question   In your case  replacing the enter key with tab functionality for the entire page  after setting the enter key as tab in the options     lt body data-plus-as-tab  true  gt           lt  body gt

User · Answer

input   live  keypress   function e                   ENTER PRESSED               if  e keyCode    13                       FOCUS ELEMENT                    var inputs     this  parents  form   eq 0  find   input visible                    var idx   inputs index this                    if  idx    inputs length - 1                        inputs 0  select                     else                       inputs idx   1  focus        handles submit buttons                     inputs idx   1  select                                      return false                              visible input cann t be focused

User · Answer

I took the best of the above and added the ability to work with any input  outside of forms  etc  Also it properly loops back to start now if you reach the last input  And in the event of only one input it blurs then refocuses the single input to trigger any external blur focus handlers      input select   keydown  function e      var key   e charCode   e charCode   e keyCode   e keyCode   0    if key    13        e preventDefault        var inputs       content   find   input visible        var nextinput   0      if  inputs index this   lt   inputs length-1           nextinput   inputs index this  1            if  inputs length  1            this  blur   focus          else         inputs eq nextinput  focus

User · Answer

If you re using IE  this worked great for me        lt body onkeydown  tabOnEnter    gt       lt script type  text javascript  gt        prevents the enter key from submitting the form  instead it tabs to the next field     function tabOnEnter             if  event keyCode  13                         event keyCode 9  return event keyCode                       lt  script gt

User · Answer

This is my solution  feedback is welcome          input   keydown  function  event      event  Keyevent     if event which    13            var inputs     this  closest  form   find   input visible            inputs eq  inputs index this   1   focus            event preventDefault      Disable standard Enterkey action              event preventDefault     lt - Disable all keys  action

User · Answer

I know this question is older than god  but I never saw an answer that was all that elegant   doc on  keydown    input   function e  ui        if e keyCode     13           e preventDefault              this  nextAll  input visible   eq 0  focus                that seems to get the job done in as few lines as humanly possible

User · Answer

I know this is rather old  but I was looking for the same answer and found that the chosen solution did not obey the tabIndex  I have hence modified it to the following which works for me  Please note that maxTabNumber is a global variable that holds the maximum number of tabbable input fields   x000D   x000D       input   on  keypress   function  e    x000D                  if  e keyCode    13    x000D                      var inputs     this  parents  form   eq 0  find   input    x000D                      var idx   inputs index this   x000D   x000D                      var tabIndex   parseInt   this  attr  tabindex     x000D                      tabIndex    tabIndex   1     maxTabNumber   1   x000D                      if  tabIndex    0    tabIndex   1    x000D                          tabindex     tabIndex        focus    x000D                          tabindex     tabIndex        select    x000D             x000D                      return false  x000D                    x000D          x000D   x000D   x000D

User · Answer

I wrote the code from the accepted answer as a jQuery plugin  which I find more useful   also  it now ignores hidden  disabled  and readonly form elements         fn enterAsTab   function          this  find  input   live  keypress   function e           ENTER PRESSED       if  e keyCode    13               FOCUS ELEMENT            var inputs       this  parents  form   eq 0  find   input visible not disabled  not  readonly                  idx   inputs index this            if  idx    inputs length - 1                inputs 0  select             else               inputs idx   1  focus       handles submit buttons             inputs idx   1  select                      return false                return this       This way I can do      form-id   enterAsTab         Figured I d post since no one has posted it as a   plugin yet and they aren t entirely intuitive to write

User · Answer

Here is a solution       input   on  keypress   function e                   ENTER PRESSED               if  e keyCode    13                       FOCUS ELEMENT                    var inputs     this  parents  form   eq 0  find   input                    var idx   inputs index this                    if  idx    inputs length - 1                        inputs 0  select                     else                       inputs idx   1  focus        handles submit buttons                     inputs idx   1  select                                      return false

User · Answer

This is at last what is working for me perfectly  I am using jqeasyui and it is working fine    document  on  keyup    input   function e     if e keyCode    13  amp  amp  e target type             submit        var inputs       e target  parents  form   eq 0  find   input visible       idx   inputs index e target          if  idx    inputs length - 1              inputs 0  select            else             inputs idx   1  focus              inputs idx   1  select

User · Answer

Includes all types of inputs      input   keydown function  e        var key   e charCode   e charCode   e keyCode   e keyCode   0      if  key    13            e preventDefault            var inputs     this  closest  form   find   input visible enabled            if   inputs length-1     inputs index this                   input enabled visible first   focus            else             inputs eq inputs index this    1  focus

User · Answer

Building from Ben s plugin this version handles select and you can pass an option to allowSubmit   ie      form   enterAsTab    allowSubmit   true     This will allow enter to submit the form if the submit button is handling the event    function             fn enterAsTab   function  options           var settings     extend            allowSubmit   false        options       this find  input  select   live  keypress    localSettings  settings   function event            if  settings allowSubmit            var type     this  attr  type            if  type     submit                 return true                       if  event keyCode    13             var inputs       this  parents  form   eq 0  find   input visible not disabled  not  readonly              var idx   inputs index this           if  idx    inputs length - 1               idx   -1           else              inputs idx   1  focus       handles submit buttons                 try               inputs idx   1  select                          catch err                   handle objects not offering select                       return false              return this         jQuery

User · Answer

Here is what I ve been using       tabindex    addClass  TabOnEnter      document  on  keypress     TabOnEnter   function  e       Only do something when the user presses enter      if  e keyCode    13              var nextElement       tabindex       this tabIndex   1                     console log this  nextElement              if  nextElement length                  nextElement focus              else                     tabindex  1     focus                  Pays attention to the tabindex and is not specific to the form but to the whole page    Note live has been obsoleted by jQuery  now you should be using on

User · Answer

I had the same requirement in my development so I did research on this  I have read many articles and tried many solutions during last two days like jQuery tabNext   plugin   I had some trouble with IE11  all IE version has this bug   When an input text followed by non text input the selection was not cleared  So I have created my own tabNext   method based on  Sarfraz solution suggestion  I was also thinking on how it should behave  only circle in the current form or maybe through the full document   I still did not take care of the tabindex property mostly because I am using it occasionally  But I will not forget it   In order to my contribution can be useful for everybody easily I have created jsfiddle example here https   jsfiddle net mkrivan hohx4nes   I include also the JavaScript part of the example here               function clearSelection                 if  document getSelection       for all new browsers  IE9   Chrome  Firefox                  document getSelection   removeAllRanges                    document getSelection   addRange document createRange                     console log  document getSelection                  else if  window getSelection       equals with the document getSelection  MSDN info                  if  window getSelection   removeAllRanges        for all new browsers  IE9   Chrome  Firefox                      window getSelection   removeAllRanges                        window getSelection   addRange document createRange                         console log  window getSelection removeAllRanges                      else if  window getSelection   empty        maybe for old Chrome                     window getSelection   empty                        console log  window getSelection empty                                    else if  document selection        IE8- deprecated                 document selection empty                    console log  document selection empty                                    function focusNextInputElement node       instead of jQuery tabNext                   TODO  take the tabindex into account if defined             if  node     null                       stay in the current form                 var inputs     node  parents  form   eq 0  find   input visible not  disabled   not  readonly                         if you want through the full document  as TAB key is working                     var inputs     document  find   input visible not  disabled   not  readonly                      var idx   inputs index node    1     next input element index                 if  idx     inputs length       at the end start with the first one                     idx   0                                    var nextInputElement   inputs idx                   nextInputElement focus        handles submit buttons                 try      if next input element does not support select                       nextInputElement select                      catch  e                                                      function tabNext                 var currentActiveNode   document activeElement              clearSelection                focusNextInputElement currentActiveNode                     function stopReturnKey e                var e    e    e     event    event   null               if  e     null                    var node    e target    e target     e srcElement    e srcElement   null                   if  node     null                        var requiredNode     node  is   input                                   amp  amp     node  is   input button                                    amp  amp     node  is   input type  submit                                  amp  amp     node  is  textarea                           console log  event key code     e keyCode      required node     requiredNode                       if   e keyCode     13   amp  amp  requiredNode                            try                               tabNext                                   clearSelection                                   focusNextInputElement node                                  jQuery tabNext                                console log  success                              catch  e                                console log  error                                                      return false                                                                          document onkeydown   stopReturnKey    I left commented rows as well so my thinking can be followed

User · Answer

This works perfect       input   keydown  function e            var key   e charCode   e charCode   e keyCode   e keyCode   0          if key    13                e preventDefault                var inputs     this  closest  form   find   input visible                inputs eq  inputs index this   1   focus

User · Answer

you should filter all disabled and readonly elements  i think this code should not cover buttons     body   on  keydown    input  select  textarea   function e        var self     this           form   self parents  form eq 0             submit    self attr  type       submit     self attr  type       button            focusable          next       if  e keyCode    13  amp  amp   submit            focusable   form find  input a select button textarea   filter   visible not  readonly   not  disabled              next   focusable eq focusable index this  1            if  next length                next focus              else               form submit                       return false

User · Answer

Here s a jQuery plugin I wrote that handles enter key as a callback or as a tab key  with an optional callback     x000D   x000D    document  ready function     x000D        one   onEnter  tab    x000D        two   onEnter  tab    x000D        three   onEnter  tab    x000D        four   onEnter  tab    x000D        five   onEnter  tab    x000D      x000D   x000D      x000D     jQuery onEnter js x000D     Written by  Jay Simons x000D     Cloudulus Media  https   code cloudulus media  x000D      x000D   x000D  if  window jQuery    x000D       function       x000D            fn onEnter   function  opt1  opt2  opt3    x000D              return this on  keyup   function  e    x000D                  var me     this   x000D                  var code   e keyCode   e keyCode   e which  x000D                  if  code    13    x000D                      if  typeof opt1     function   x000D                        x000D                          opt1 me  opt2   x000D                          return true  x000D                       else if  opt1     tab   x000D                        x000D                          var eles     document  find  input select textarea button   filter   visible not  disabled  not  readonly      x000D                          var foundMe   false  x000D                          var next   null  x000D                          eles each function    x000D                              if   next   x000D                                  if  foundMe  next     this   x000D                                  if  JSON stringify   this      JSON stringify me   foundMe   true  x000D                                x000D                              x000D                          next focus    x000D                          if  typeof opt2      function   x000D                            x000D                              opt2 me  opt3   x000D                            x000D                          return true  x000D                        x000D                    x000D                 on  keydown   function e   x000D                  var code   e keyCode   e keyCode   e which  x000D                  if  code    13  x000D                    x000D                      e preventDefault    x000D                      e stopPropagation    x000D                      return false  x000D                    x000D                  x000D            x000D         jQuery   x000D    else   x000D      console log  onEnter js  This class requies jQuery  gt  v3     x000D    x000D  input  x000D  select  x000D  textarea  x000D  button   x000D    display  block  x000D    margin-bottom  1em  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt form gt  x000D     lt input id  one  type  text  placeholder  Input 1    gt  x000D     lt input id  two  type  text  placeholder  Input 2    gt  x000D   x000D     lt select id  four  gt  x000D       lt option selected gt A Select Box lt  option gt  x000D       lt option gt Opt 1 lt  option gt  x000D       lt option gt Opt 2 lt  option gt  x000D     lt  select gt  x000D     lt textarea id  five  placeholder  A textarea  gt  lt  textarea gt  x000D     lt input id  three  type  text  placeholder  Input 3    gt  x000D     lt button gt A Button lt  button gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Why not something simple like this     document  on  keypress    input   function e       if e keyCode    13  amp  amp  e target type      submit         e preventDefault        return   e target  blur   focus               This way  you don t trigger the submit unless you re focused on the input type of  submit  already  and it puts you right where you left off  This also makes it work for inputs which are dynamically added to the page   Note  The blur   is in front of the focus   for anyone who might have any  on blur  event listeners  It is not necessary for the process to work

User · Answer

These solutions didn t work with my datagrid   I was hoping they would   I don t really need Tab or Enter to move to the next input  column  row or whatever   I just need Enter to trigger  focusout or  change and my datagrid updates the database   So I added the  enter  class to the relevant text inputs and this did the trick for me     function        if    browser mozilla                enter   keypress checkForEnter         else               enter   keydown checkForEnter              function checkForEnter event        if  event keyCode    13                enter   blur

[jquery] jquery how to catch enter key and change event to tab

Examples related to jquery

Examples related to events

Examples related to keyevent