Archive for February 2015

PREVENT DEFAULT TAB EVENT TO AVOID FOCUS ON URL USING ANGULARJS



   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



Saturday, 7 February 2015
Posted by Harish K V

ANGULARJS - SUPER POWERED BY GOOGLE



    It has been a long time since my last post. I am back with a new and powerful technology - Angularjs - Super-powered by Google. 

   Angularjs is a javascript framework for developing sweet and dynamic web applications. You can find more about it on their website Angularjs

  So what am I going to do with that much power in my hand? Teach by composing tutorials? Nah! There are more number of websites and blogs which does that. What I am going to do is give solutions to problems which I could not find online or which were not in the right order.

You can comment on each post if you have any questions or if you want to suggest a better solution for the problem, you are most welcome. So let us begin!

ALSO SEE: THE DEATH SWITCH - PASS ON YOUR INFORMATION AFTER YOU DIE


Posted by Harish K V
Creative Commons License
Technodrivein by Harish is licensed under a Creative Commons Attribution 3.0 Unported License.
back to top