There is also the question of what elements can be focused on and why. There is also how to go about making an element an element that can be focused on with the tab index property.
1 - Basics of the on focus event
- Source code examples are on Github
1.1 - onfocus event hander for an element
When I open this file up in the browser and click on the foo input tag the event tag of the element and the string ‘foo’ log to the console as expected.
So in this section I will be going over a simple example that simulates a focus event by gaining a reference to an input element that can be focused in the browser and calling the focus element method of that element.
So there is the focus event that fires when an element gets the focus, and then there is the blur event that fires when that element looses the focus for whatever the reason. The focus can be lost for a wide range of reasons, but often it is because the user just simply moved on to another element in a form or click another area of the page.
In this example I will be making use of both the focus and blur events. I have two text input events that can be used to set some x and y values, and a div element that can be used to display messages. in the event that an input looses focus the message divs content is cleared, while the message div displays a message for the input element when it gains focus.
3 - tabindex and the onfocus event
Another subject of interest when it comes to the on focus event is the tab index attribute of html elements. This tab index attribute is one way to make it so elements that can not be focused by default focusable such as canvas elements. This might not always be such a great idea, but it can be done with the tabindex property
WHen it comes to things like canvas elements there are many other events to work with that might be more appropriate, but still for whatever reason if I want to make a canvas element something that can be focused on via the tab button this will work.
4 - conclusion