Hi guys, my tab index is working properly but with a catch, once i get to the last focused element, instead of going back to the first element again it goes trough the address bar in the browser, any idea on a workaround for this?
Much apreciated!
Thank you both, @Amit Verma and @Sanjay Kushwah
But brainstorming it a bit more i thought about an even easier solution.
If you add an event listener to the onFocus event of the last input to check if the key pressed is the tab key, ill just make the focus on the first input again.
Here it is the following JS code for future use cases:
----------------------------------------------------------------------------------------------
document.getElementById($parameters.LastInputId).addEventListener("keydown", (e) => {
if (e.key === "Tab"){
document.getElementById($parameters.FirstInputId).focus() }
});
Cheers everyone
Hi Pedro,
Please read this article How to repeat the tabindex from 1 after it has gone to the last element with a tabindex?
Live Example : https://jsfiddle.net/dipish/F82Xj/
Hope this will help you :)
Thanks,
Amit
Hi @Pedro Silva,
There are multiple ways to skip address bar while using tab on keyboard.
1. Assign negative tabindex values -1 to address bar.
This effectively removes them from the tab flow.
additional:
2. you can also use JS function at your last element when someone press tab to last element then focus again goes to first element (that is tabindex=1)
this can be little bit hard to implement although not to much but it is better you try with first easiest way.
Note : If your address bar is not a part of tabindex flow then first way will work But if your Address bar is also inside tabindex flow and after last element focus/tab is not goint to 1st tab index then you need to set it using JS to first element again.
Hope this will help you
thanks,Sanjay Kushwah