JavaScript for handling Tab Key press

Question

As we know  when we click on TAB key on keyboard  it allows us to navigate through all active href links present open webpage  Is it possible to read those urls by means of JavaScript   example   function checkTabPress key val        if  event keyCode    9               Here read the active selected link

User · Answer

try this    lt body gt      lt div class  linkCollection  gt                lt a tabindex 1 href  www demo1 com  gt link lt  a gt                    lt a tabindex 2 href  www demo2 com  gt link lt  a gt                    lt a tabindex 3 href  www demo3 com  gt link lt  a gt                    lt a tabindex 4 href  www demo4 com  gt link lt  a gt                    lt a tabindex 5 href  www demo5 com  gt link lt  a gt                    lt a tabindex 6 href  www demo6 com  gt link lt  a gt                    lt a tabindex 7 href  www demo7 com  gt link lt  a gt                    lt a tabindex 8 href  www demo8 com  gt link lt  a gt                    lt a tabindex 9 href  www demo9 com  gt link lt  a gt                    lt a tabindex 10 href  www demo10 com  gt link lt  a gt              lt  div gt    lt  body gt    lt script gt    document  ready function          linkCollection a   focus function        var href   this  attr  href        console log href          href variable holds the active selected link             lt  script gt    don t forgot to add jQuery library   lt script src  https   ajax googleapis com ajax libs jquery 3 4 0 jquery min js  gt  lt  script gt

User · Answer

Use TAB  amp  TAB SHIFT in a Specified container or element   Source   we will handle TAB  amp  TAB SHIFT key listeners first            document  ready function                 lastIndex   0                document  keydown function e                    if  e keyCode    9  var thisTab       focus   attr  tabindex                    if  e keyCode    9                        if  e shiftKey                              Focus previous input                         if  thisTab    startIndex                                        tabLimitInID  find   tabindex     lastIndex        focus                                return false                                                  else                           if  thisTab    lastIndex                                        tabLimitInID  find   tabindex     startIndex        focus                                return false                                                                                                var setTabindexLimit   function x  fancyID                    console log x                   startIndex   1                  lastIndex   x                  tabLimitInID   fancyID                          tabLimitInID  find   tabindex     startIndex        focus                                Taking last tabindex 10                setTabindexLimit 10   limitTablJolly                  In HTML define tabindex           lt div class  limitTablJolly  gt               lt a tabindex 1 gt link lt  a gt                    lt a tabindex 2 gt link lt  a gt                    lt a tabindex 3 gt link lt  a gt                    lt a tabindex 4 gt link lt  a gt                    lt a tabindex 5 gt link lt  a gt                    lt a tabindex 6 gt link lt  a gt                    lt a tabindex 7 gt link lt  a gt                    lt a tabindex 8 gt link lt  a gt                    lt a tabindex 9 gt link lt  a gt                    lt a tabindex 10 gt link lt  a gt              lt  div gt

User · Answer

You need to use Regular Expression For Website URL it is      var urlPattern       http ftp https      w-      w-       w        amp      -    w      amp     -       Use this Expression as in example     var regex   new RegExp urlPattern     var t    www google com     var res   t match regex  g     For You have to pass your web page as string to this javascript in variable t and get array

User · Answer

Having following html    lt  -- note that not all browsers focus on links when Tab is pressed -- gt   lt a href  http   example com  gt Link lt  a gt    lt input type  text  placeholder  Some input    gt   lt a href  http   example com  gt Another Link lt  a gt    lt textarea gt     lt  textarea gt    You can get to active link with      event listener for keyup function checkTabPress e         use strict          pick passed event or global event object if passed one is empty     e   e    event      var activeElement      if  e keyCode    9               Here read the active selected link          activeElement   document activeElement             If HTML element is an anchor  lt a gt          if  activeElement tagName toLowerCase       a                  get it s hyperlink             alert activeElement href            var body   document querySelector  body    body addEventListener  keyup   checkTabPress     Here is working example

User · Answer

Only one suggestion instead of 9 you can use KeyCodes TAB

User · Answer

Given this piece of HTML code    lt a href  https   facebook com   gt Facebook lt  a gt   lt a href  https   google ca   gt Google lt  a gt   lt input type  text  placeholder  an input box  gt    We can use this JavaScript   function checkTabPress e         use strict       var ele   document activeElement       if  e keyCode     9  amp  amp  ele nodeName toLowerCase        a             console log ele href            document addEventListener  keyup   function  e        checkTabPress e      false     I have bound an event listener to the document element for the keyUp event  which triggers a function to check if the Tab key was pressed  or technically  released    The function checks the currently focused element and whether the NodeName is a  If so  it enters the if block and  in my case  writes the value of the href property to the JavaScript console   Here s a jsFiddle

User · Answer

You should be able to do this with the keyup event  To be specific  event target should point at the selected element and event target href will give you the href-value of that element  See mdn for more information   The following code is jQuery  but apart from the boilerplate code  the rest is the same in pure javascript  This is a keyup handler that is bound to every link tag      a   on   keyup   function  e         if  e which    9             console log  e target href                 jsFiddle  http   jsfiddle net 4PqUF

[javascript] JavaScript for handling Tab Key press

Examples related to javascript