How to advance to the next form input when the current input has a value

Question

I am having a form with lots of entries  I would like to change my focus to the next textbox  once I entered the value in the current textbox  and want to continue this process up to the last field  My question is  is it possible to simulate what happens when pressing the tab key through Javascript coding once I enter the value in the text box   Without pressing the tab key in keyboard  I would like to bring the same functionality through Javascript  Is this possible

User · Answer

This simulates a tab through a form and gives focus to the next input when the enter key is pressed   window onkeypress   function e        if  e which    13            e preventDefault            var inputs   document getElementsByClassName  input            for  var i   0  i  lt  inputs length  i              if  document activeElement id    inputs i  id  amp  amp  i 1  lt  inputs length                 inputs i 1  focus                break

User · Answer

function nextField current       for  i   0  i  lt  current form elements length  i             if  current form elements i  tabIndex - current tabIndex    1               current form elements i  focus                if  current form elements i  type     quot text quot                    current form elements i  select                                     This  when supplied with the current field  will jump focus to the field with the next tab index  Usage would be as follows  lt input type  quot text quot  onEvent  quot nextField this   quot    gt

User · Answer

I couldn t find an answer that could do what I wanted  I had a problem where there were some link elements that I didn t want users tabbing to  This is what I came up with    Note that in my own code I used a not  dropdown-item  instead of a on the allElements line  in order to prevent users tabbing to a dropdown-item    function event             Note that this doesn t honour tab-indexes          event preventDefault               Isolate the node that we re after         const currentNode   event target             find all tab-able elements         const allElements   document querySelectorAll  input  button  a  area  object  select  textarea   contenteditable                Find the current tab index          const currentIndex       allElements  findIndex el   gt  currentNode isEqualNode el              focus the following element         const targetIndex    currentIndex   1    allElements length          allElements targetIndex  focus

User · Answer

This should work  Working with and without tabindex    x000D   x000D  var currentlyFocused   undefined  x000D  var tabableElements   undefined  x000D   x000D      x000D     Compare function for element sort x000D      param  string   null  a x000D      param  string   null  b x000D      param  boolean  asc x000D      x000D  function sortCompare a  b  asc   true    x000D    let result   null  x000D    if  a    null  result   1  x000D    else if  b    null  result   -1  x000D    else if  parseInt a   gt  parseInt b   result   1  x000D    else if  parseInt a   lt  parseInt b   result   -1  x000D    else result   0  x000D    return result    asc   1   -1   x000D    x000D   x000D      x000D     When an element is focused assign it to the currentlyFocused variable x000D      param  Element  element x000D      x000D  function registerOnElementFocus element    x000D    element addEventListener  focus   function el    x000D      currentlyFocused   el srcElement  x000D        x000D    x000D   x000D      x000D     Tab Trigger x000D      x000D  function onTabClick     x000D      Select currently focused element x000D    let currentIndex  x000D    tabableElements forEach  el  idx    gt    x000D        return if no element is focused x000D      if   currentlyFocused  return  x000D      if  currentlyFocused isEqualNode el     x000D          assign current index and return x000D        currentIndex   idx  x000D        return  x000D        x000D        x000D      if theres no focused element or the current focused element is last start over x000D    let lastIndex   tabableElements length - 1  x000D    let nextElementidx   currentIndex     undefined    currentIndex    lastIndex   0   currentIndex   1  x000D      Focus x000D    currentlyFocused   tabableElements nextElementidx   x000D    currentlyFocused focus    x000D    x000D      x000D     Init must be run after all elements are loadead in the dom x000D      x000D  function init     x000D      Get all tab-able elements x000D    let nodeList   document querySelectorAll  input  button  a  area  object  select  textarea   tabindex     x000D      To array for easier manipulation x000D    tabableElements   Array prototype slice call nodeList  0   x000D      Correcting tabindexes to ensure correct order x000D    tabableElements forEach  el  idx  list    gt    x000D      let tabindex   el getAttribute  tabindex    x000D        -1 tabindex will not receive focus x000D      if  tabindex    -1  list splice idx  1   x000D        null or 0 tabindex in normal source order x000D      else if  tabindex    null    tabindex    0    x000D        list idx  setAttribute  tabindex   9999   idx   x000D        x000D        x000D      sort elements by their tabindex in ascending order x000D    tabableElements sort  elementA  elementB    gt  sortCompare elementA getAttribute  tabindex    elementB getAttribute  tabindex      x000D      register focus event to elements x000D    tabableElements forEach el   gt  registerOnElementFocus el    x000D    x000D   lt  doctype html gt  x000D   lt html lang  en  gt  x000D   x000D   lt head gt  x000D     lt  -- Required meta tags -- gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta name  viewport  content  width device-width  initial-scale 1  shrink-to-fit no  gt  x000D   x000D     lt  -- Bootstrap CSS -- gt  x000D     lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0 css bootstrap min css  integrity  sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW dAiS6JXm  crossorigin  anonymous  gt  x000D   x000D     lt title gt Virtual tab lt  title gt  x000D   lt  head gt  x000D   x000D   lt body onload  init    gt  x000D     lt div class  container  gt  x000D       lt h3 gt Virtual Tab Demo lt  h3 gt  x000D       lt form gt  x000D         lt div class  btn btn-primary  style  position  fixed   onclick  onTabClick    gt  x000D          Tab  x000D         lt  div gt  x000D         lt br gt  x000D         lt br gt  x000D         lt button id  button1  type  button  onclick  alert  button 1    gt Button1 lt  button gt  x000D         lt button id  button2  type  button  onclick  alert  button 2    gt Button2 lt  button gt  x000D         lt br gt  x000D         lt br gt  x000D         lt input id  text  type  text  gt text x000D         lt br gt  x000D         lt input id  password  type  password  tabindex  -1  gt password x000D         lt br gt  x000D         lt input id  number  type  number  tabindex  5  gt number x000D         lt br gt  x000D         lt input id  checkbox  type  checkbox  gt checkbox x000D         lt br gt  x000D         lt input id  radio  type  radio  gt radio x000D         lt br gt  x000D         lt br gt  x000D         lt button id  button3  type  button  onclick  alert  button 3    gt Button3 lt  button gt  x000D         lt button id  button4  type  button  onclick  alert  button 4    gt Button4 lt  button gt  x000D         lt br gt  x000D         lt br gt  x000D         lt select id  select  gt  x000D           lt option value  volvo  gt Volvo lt  option gt  x000D           lt option value  saab  gt Saab lt  option gt  x000D           lt option value  mercedes  gt Mercedes lt  option gt  x000D           lt option value  audi  gt Audi lt  option gt  x000D         lt  select gt  x000D         lt br gt  x000D         lt br gt  textarea x000D         lt br gt  x000D         lt textarea id  textarea  gt  lt  textarea gt  x000D           lt br gt  x000D           lt br gt  x000D           lt span id  span  tabindex  1  gt Focus other elements  lt  span gt  x000D       lt  form gt  x000D     lt  div gt  x000D     lt  -- Optional JavaScript -- gt  x000D     lt  -- jQuery first  then Popper js  then Bootstrap JS -- gt  x000D     lt script src  https   code jquery com jquery-3 2 1 slim min js  integrity  sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr rE9 Qpg6aAZGJwFDMVNA GpGFF93hXpG5KkN  crossorigin  anonymous  gt  lt  script gt  x000D     lt script src  https   cdnjs cloudflare com ajax libs popper js 1 12 9 umd popper min js  integrity  sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q  crossorigin  anonymous  gt  lt  script gt  x000D     lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0 js bootstrap min js  integrity  sha384-JZR6Spejh4U02d8jOt6vLEHfe JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl  crossorigin  anonymous  gt  lt  script gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

In the first question  you don t need an event listener on every input that would be wasteful   Instead  listen for the enter key and to find the currently focused element use document activeElement  window onkeypress   function e        if  e which    13           e preventDefault           var nextInput   inputs get inputs index document activeElement    1          if  nextInput              nextInput focus                        One event listener is better than many  especially on low power   mobile browsers

User · Answer

you just need to give focus to the next input field  by invoking focus  method on that input element   for example if you re using jQuery this code will simulate the tab key when enter is pressed   var inputs       input   keypress function e        if  e which    13           e preventDefault           var nextInput   inputs get inputs index this    1          if  nextInput              nextInput focus

User · Answer

I ve adapter the answer of ltiong sh to work for me   function nextField current       var elements   document getElementById  my-form   elements      var exit   false      for i   0  i  lt  elements length  i                if  exit                elements i  focus                if  elements i  type     text                    elements i  select                                 break                    if  elements i  isEqualNode current                  exit   true

User · Answer

Needed to emulate the tab functionality a while ago  and now I ve released it as a library that uses jquery      EmulateTab  A jQuery plugin to emulate tabbing between elements on a page    You can see how it works in the demo   if  myTextHasBeenFilledWithText         Tab to the next input after  my-text-input       my-text-input   emulateTab

User · Answer

In vanilla JS  function keydownFunc event          var x   event keyCode                if  x    13            try              var nextInput   event target parentElement nextElementSibling childNodes 0               nextInput focus               catch  error               console log error

User · Answer

If you have jQuery UI this little function allows basic tabbing handlePseudoTab direction        if   document hasFocus       document activeElement            return            const focusList      quot  focusable quot    yourHTMLElement       const i   focusList index document activeElement       if  i  lt  0            focusList 0  focus       nothing is focussed so go to list item 0       else if  direction      next   amp  amp  i   1  lt  focusList length            focusList i   1  focus       advance one       else if  direction      prev   amp  amp  i - 1  gt  -1            focusList i - 1  focus       go back one

[javascript] How to advance to the next form input when the current input has a value?

Examples related to javascript

Examples related to dom-events