Broad Network


HTML 5 Focusing

Mastering HTML5 - Part 8

Forward: In this part of the series we look at HTML 5 Focusing.

By: Chrysanthus Date Published: 22 Jul 2012

Introduction

This is part 8 of my series, Mastering HTML5. I assume you have read the previous parts of the series before reaching here. In this part of the series we look at HTML 5 Focusing.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Focus
There are many elements on a web page. An element is said to have focus if an action on the keyboard or mouse would have effect on the element. For example, if an element has focus and the user presses the left mouse button, the element would be clicked. If an input text control has focus, when the user presses an alphabet key on the keyboard, the input text field would receive the alphabet.

Note: the body element has focus when no other element has focus. Only one element has focus at a time.

Elements that can have Focus
The following elements can have focus:

- hyperlinks.
- button elements that are not disabled (see later).
- input elements whose type attribute are not in the Hidden state and that are not disabled (see later).
- select elements that are not disabled (see later).
- textarea elements that are not disabled (see later)
- command elements that do not have a disabled (see later) attribute.
- elements with a draggable (see later) attribute set, if that would enable the browser to allow the user to begin a drag operations for those elements without the use of a pointing device.
- Editing hosts (see later).

The tabIndex Attribute
When a web page is displayed, if you keep pressing the tab key on the keyboard, the focus (highlight) will be moving from one element to the other. You can control the order in which the elements would receive focus using an attribute called the tabIndex. This attribute can be used with all the above elements. The value of the attribute is an integer. The elements would receive focus from the element with the smallest integer to the element with the largest integer, as you press the tab key repeatedly. The start number of the integer does not matter. The integer just has to increase as the tab focusing moves from one element to the other; the exact increment does not matter. Read and try the following code, keep pressing the tab key when the web page is displayed; as you are pressing the tab key repeatedly, watch how the focus is moving among the hyperlinks, according to the integer values:

<!DOCTYPE HTML>
<html>
<body>
    <a href= "url1" tabIndex="5">One</a> <br>
    <a href= "url2" tabIndex="9">Two</a> <br>
    <a href= "url3" tabIndex="7">Three</a> <br>
    <a href= "url4" tabIndex="12">Four</a> <br>
<body>
</html>

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Related Links

Major in Website Design
Web Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT

Comments

Become the Writer's Fan
Send the Writer a Message