Saturday, 7 February 2015
Preventing default tab event to avoid focus on the URL bar or any other elements other than the desired ones.
So here is our first item in hand and let us see how we solve it. It goes this way - When there are multiple input boxes or text areas in a particular page of web application, the user generally uses tab button to switch to the next input box or text area. This works fine until the user reaches the last input box or text area. Now when he presses the tab button the focus is moved to URL box or any other element on the web application. Instead we will try to bring it back to first input box or text area of the web application.
The below solution works for dynamically created input or text areas and also for static number and it is purely using Angularjs and javascript.
Let us take input boxes into consideration.
First set an id to each and every input box in the web application with a common pattern. For example: textbox-1, textbox-2, etc,. Here only the integer at the end differs so it will be easy to find an element and focus it ourselves without depending on the tab event.
Prevent the default action of the tab button so that the user is not let to the next element on clicking tab button. Now get the current element's id and just get the string after the '-' character. Since it's a string, parse it into an integer and add 1 to it and after converting it back to string concatenate it with the id pattern 'textbox-'. This gives our next elements id. Now check if there is an element with that id if so then set focus to that element or set focus to the first element of the web application.
Now the resultant functionality will be exactly like using tab button and when the user clicks the tab button from the last input box, the focus will be on first element again.
Here is the output fiddle
http://jsfiddle.net/HarishKV/xea0rjmx/4/
ALSO SEE: ANGULARJS - SUPER POWERED BY GOOGLE
