6

Desired behavior : When a Tabkey press happens on a particular dom element in a webPage I want my cursor focus to go to address bar. (I want it via Javascript. Using any browser extension is not what is desired here)

When you press Control + L shortcut in a webpage, it takes your focus to address bar. But when I try to trigger this via javascript it does'not work. 

<div id="1" tabindex="1"></div>
<div id="2" tabindex="1"></div>
<div id="3" tabindex="1"></div>
<script>
    var some = $('#1');
    some.on('keydown', function (e) {
        if (e.keyCode == 9 /* TabKey */) {
            var e = jQuery.Event("keydown");
            e.keyCode = 76 /* LKey */;
            e.ctrlKey = true;
            $('body').trigger(e);

        }
    });
</script>
Rohit Kumar
  • 829
  • 2
  • 12
  • 21
  • 3
    Possible duplicate of [Highlight URL bar using Chrome and Safari extension](https://stackoverflow.com/questions/10492399/highlight-url-bar-using-chrome-and-safari-extension) – Ritesh Nair Jul 25 '17 at 13:29
  • 2
    No. I want to achieve it using Javascript/jquery. Browser plugin is not the solution – Rohit Kumar Jul 25 '17 at 13:47
  • 2
    This isn't possible. – Daniel Beck Jul 25 '17 at 14:01
  • 1
    Some people can't use a mouse and rely on the keyboard to move around the page. The TAB key is an essential navigation key; catching TAB key presses and sending focus to the URL bar (if it is technically possible) would break navigation for this group of users. In addition, I can't even think of a reason for doing this. – Tsundoku Jul 26 '17 at 10:33
  • @ChristopheStrobbe - Consider a scenario where my application is plugin to another application and my application covers the whole screen (which means it is not a dialog) The desired behaviour is : - shift focus from last element from my DOM to address bar. What actually happens : - Focus goes to the client DOM (where my application is pluged into) Thought of 1 way of doing it :- Add a tabIndex -1 to every element which does not belong to my DOM. CONS with this : - - Not good perf wise - We might end up adding tabindex to elements which originally Did not had this property. – Rohit Kumar Jul 27 '17 at 10:39
  • 1
    Thanks for the clarification, but it's still not clear to me why it is necessary for the plugin to give focus to the URL bar when users should be able to do this without the help of a plugin or application. – Tsundoku Jul 27 '17 at 11:33
  • 1
    @RohitKumar since this isn't a dialog and is taking up the entire screen, can you use javascript to add the css of 'display: none' to the client DOM to achieve your goal? – Skerrvy Jul 27 '17 at 12:43
  • @ChristopheStrobbe - Its a accessibility behavior. That a user should be able to go to the address bar at any point if he/she wants to change the web url. Consider any web page - say google.com it will have a default focus when it opens. User can tab through different elements in web page and after the last element focus, on tab the focus goes to address bar and next tab key press focus shifts back into the webpage again. – Rohit Kumar Jul 28 '17 at 06:36
  • @Skerrvy thanks, I can try that – Rohit Kumar Jul 28 '17 at 06:37
  • 1
    On any perfectly normal website, tabbing will eventually take you to the address bar. If that takes too long, the user can use a shortcut that is built into the browser, e.g. Alt + D or Ctrl + L. It is still not clear to me what your use case is for duplicating standard browser behaviour. – Tsundoku Jul 28 '17 at 09:26
  • By default the user can still return to the address bar by executing the keyboard command (whether its ctrl+l, cmd+l or something of their own choosing). I feel this post is asking the wrong question by suggesting we highjack the key command because you don't want keyboard users to focus on invisible elements. I suggest forgetting the idea of forcing focus back to the address bar and instead focus on hiding the invisible content from keyboard users so the focus will return there naturally. Forcing user focus is usually unexpected and disorienting and should be avoided wherever possible. – Skerrvy Jul 28 '17 at 14:56

2 Answers2

11

Each browser (and operating system) handles this differently and it is not currently possible to highlight the address bar using javascript. Even if it was, keep in mind that people can map these commands differently (if they're not different already). For example, on a mac the command to access the address bar is Command + L, not Ctrl + L.

Skerrvy
  • 902
  • 8
  • 17
4

According to Trusted events in the UI Events specification

Events that are generated by the user agent, either as a result of user interaction, or as a direct result of changes to the DOM, are trusted by the user agent with privileges that are not afforded to events generated by script through the createEvent() method, modified using the initEvent() method, or dispatched via the dispatchEvent() method. The isTrusted attribute of trusted events has a value of true, while untrusted events have a isTrusted attribute value of false.

So triggering the CTRL+L event will have no effect on your browser which will need a trusted event for opening the address bar.

And yes, as already said by some people, removing default browser behaviour does not help accessibility.

On a purely technical point of view, jQuery UI gives you a very quick way for answering the use case in your comments. This will move to the last focusable element on "keydown", and then when you relapse the tab key, will go to the default element after your page (address bar, depending on your browser)

$("#MyLastElement").on('keydown', function (e) {
  if((e.keyCode==9)&&(!e.shiftKey)) {
     $(":tabbable").last().focus();
  }
});
Adam
  • 17,838
  • 32
  • 54