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

Look at the `document.activeElement` to get the currently focused element (if any, or the `body`). You can check that `.nodeName.toUpperCase() === "a"` and then read its `.href` property — Ian, Aug 19 '13 at 14:36
Take a look at this question (didn't test it). http://stackoverflow.com/questions/11277989/how-to-get-the-focused-element-with-jquery — Sjors van Dongen, Aug 19 '13 at 14:43
@rink.attendant.6 Well crap, of course I did. Haha thanks, didn't even realize that. With whatever method, I definitely meant to match the case obviously — Ian, Aug 19 '13 at 15:20
Javascript Example to Handle TAB and TAB+SHIFT in a specified element to Loop in http://www.freakyjolly.com/navigate-form-field-link-elements-using-tab-and-shifttab-keys-in-webpage/ — Code Spy, Jul 24 '18 at 04:54

Sumurai8 · Answer 1 · 2013-08-19T15:05:04.930

15

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/

edited Aug 19 '13 at 15:05

answered Aug 19 '13 at 14:51

Sumurai8

20,333
11
66
100

This will point to the selected element at the time the tab key is pressed, not the new element that has been focused. – zzzzBov Aug 19 '13 at 15:01
1

keydown will be fired before whatever the key does (and you can cancel whatever it does then), as far as I am aware (and as far as I can test in IE8) keyup will point to the new element, as the keyup is fired after whatever that key would do. – Sumurai8 Aug 19 '13 at 15:04
I didn't know that you could bind to the `a` element and still have it trigger if the previously focused element wasn't an `a`. +1, despite the use of jQuery. – rink.attendant.6 Aug 19 '13 at 15:15

uKolka · Answer 2 · 2013-08-19T17:09:17.280

14

Having following html:

<!-- note that not all browsers focus on links when Tab is pressed -->
<a href="http://example.com">Link</a>

<input type="text" placeholder="Some input" />
<a href="http://example.com">Another Link</a>

<textarea>...</textarea>

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

edited Aug 19 '13 at 17:09

answered Aug 19 '13 at 14:46

uKolka

36,422
4
33
44

@rink.attendant.6 I'm pretty sure it does. Try [full screen result](http://jsfiddle.net/kolkabes/esMQD/embedded/result/) and press Tab a couple of times. Shift-Tab works too. – uKolka Aug 19 '13 at 14:53
Take my words back. I doesn't but not in every browser. Let me come up with a cross-browser code. – uKolka Aug 19 '13 at 14:56
Whatever browser it works in, that browser has serious issues with its JavaScript engine... – rink.attendant.6 Aug 19 '13 at 15:00
I don't think Chrome has any serious issues =) – uKolka Aug 19 '13 at 15:01
I guess yours will work in Chrome, Safari, IE 10 in compatibility mode, and older versions of IE. – rink.attendant.6 Aug 19 '13 at 15:13

score 3 · Answer 3 · edited Jul 24 '18 at 06:38

3

Only one suggestion instead of 9 you can use KeyCodes.TAB.

edited Jul 24 '18 at 06:38

Deepak

614
1
7
20

answered Oct 12 '17 at 08:16

Panky031

425
1
5
14

3

Or `e.key === 'Tab'` – jsruok Mar 22 '22 at 13:26

rink.attendant.6 · Answer 4 · 2013-08-19T14:56:43.043

1

Given this piece of HTML code:

<a href='https://facebook.com/'>Facebook</a>
<a href='https://google.ca/'>Google</a>
<input type='text' placeholder='an input box'>

We can use this JavaScript:

function checkTabPress(e) {
    'use strict';
    var ele = document.activeElement;

    if (e.keyCode === 9 && 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

edited Aug 19 '13 at 14:56

answered Aug 19 '13 at 14:50

rink.attendant.6

44,500
61
101
156

IE 9, Firefox, and Chrome all work for mine and all of my variables are defined. – rink.attendant.6 Aug 19 '13 at 15:06
1

Why do you wrap callback function into another useless callback? – uKolka Aug 19 '13 at 15:10
Because I'm passing a parameter. – rink.attendant.6 Aug 19 '13 at 15:13
1

That parameter is an event and it gets passed anyway. – uKolka Aug 19 '13 at 15:14
"it gets passed anyway" Maybe that's why your solution isn't cross-browser compatible, see my comment on your answer and also [this SO question](http://stackoverflow.com/questions/16306486/unexpected-access-to-event-variable-across-browsers). – rink.attendant.6 Aug 19 '13 at 15:18
If it doesn't get passed it's likely that there is a global variable 'event' so you can just choose between them. – uKolka Aug 19 '13 at 15:22
Thanks, for the sample. I also used key code 9 in my program, but it didn't work now in safari and chrome... – code4j Jun 01 '16 at 05:38

score 1 · Answer 5 · answered May 09 '19 at 12:51

try this

 <body>
   <div class="linkCollection">
             <a tabindex=1 href="www.demo1.com">link</a>    
             <a tabindex=2 href="www.demo2.com">link</a>    
             <a tabindex=3 href="www.demo3.com">link</a>    
             <a tabindex=4 href="www.demo4.com">link</a>    
             <a tabindex=5 href="www.demo5.com">link</a>    
             <a tabindex=6 href="www.demo6.com">link</a>    
             <a tabindex=7 href="www.demo7.com">link</a>    
             <a tabindex=8 href="www.demo8.com">link</a>    
             <a tabindex=9 href="www.demo9.com">link</a>    
             <a tabindex=10 href="www.demo10.com">link</a>   
        </div>

</body>

<script>
$(document).ready(function(){
  $(".linkCollection a").focus(function(){
    var href=$(this).attr('href');
    console.log(href);
    // href variable holds the active selected link.
  });
});
</script>

don't forgot to add jQuery library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

using a tabindex larger then 0 disrupts the tab order and it isn't recommended. — Ben S, Feb 06 '20 at 10:26
Question, If I have a separate javascript file, do I add the jQuery library on the HTML or in the separate JavaScript file? — cakebot, Aug 16 '21 at 10:37
Fine with separate JavaScript file as well. we just need jQuery library. — Niravdas, Aug 17 '21 at 06:43

score 0 · Answer 6 · answered Jul 24 '18 at 04:58

Use TAB & TAB+SHIFT in a Specified container or element

Source

we will handle TAB & 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

        <div class="limitTablJolly">
            <a tabindex=1>link</a>    
             <a tabindex=2>link</a>    
             <a tabindex=3>link</a>    
             <a tabindex=4>link</a>    
             <a tabindex=5>link</a>    
             <a tabindex=6>link</a>    
             <a tabindex=7>link</a>    
             <a tabindex=8>link</a>    
             <a tabindex=9>link</a>    
             <a tabindex=10>link</a>   
        </div>

score 0 · Answer 7 · answered Jan 22 '22 at 20:39

You should be able to do this with the keydown 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 keydown handler that is bound to every link tag.

$('a').on( 'keydown ', function( e ) {
if( e.which == 9 ) {
    console.log( e.target.href );
}});

score 0 · Answer 8 · answered Feb 03 '23 at 15:35

event.keyCode has been deprecated.

Use event.key instead.

Here are the values you can use to assert against event.key: https://www.w3.org/TR/uievents-key/#named-key-attribute-values

Use this JavaScript solution:

  function keyPress(event) {
    if (event.key === "Tab") {
       // ...
    }
  }

score -10 · Answer 9 · answered Jul 12 '14 at 05:38

-10

You need to use Regular Expression For Website URL it is

var urlPattern = /(http|ftp|https)://[\w-]+(.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?/

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

answered Jul 12 '14 at 05:38

Vishmay

1

This not enough to answer the question. – juliocesar Jul 12 '14 at 06:06

JavaScript for handling Tab Key press

9 Answers9

Linked