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>
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>
- 3 Possible duplicate of Highlight URL bar using Chrome and Safari extension – Ritesh Nair Commented Jul 25, 2017 at 13:29
- 2 No. I want to achieve it using Javascript/jquery. Browser plugin is not the solution – Rohit Kumar Commented Jul 25, 2017 at 13:47
- 2 This isn't possible. – Daniel Beck Commented Jul 25, 2017 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 Commented Jul 26, 2017 at 10:33
- 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 Commented Jul 27, 2017 at 11:33
2 Answers
Reset to default 11Each 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 mands differently (if they're not different already). For example, on a mac the mand to access the address bar is Command + L, not Ctrl + L.
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 theinitEvent()method, or dispatched via thedispatchEvent()method. TheisTrustedattribute of trusted events has a value oftrue, while untrusted events have aisTrustedattribute 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 ments. 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();
}
});