# Using focus

Placing focus points on items on screens allows users to select them. For example, users can activate text fields to type text, open lists to select items, or press buttons to execute functions. When using mobile devices, users have a shorter attention spans and are frequently distracted from the task at hand. You should not trust users to remember what they were doing on the device before they were distracted. Make the focus of the controls stand out visually by highlighting it on the screen. You can highlight items by placing a border around buttons or text fields or by using a selection bar in lists.

### Specifying focus points

Use the five point navigation key to move the focus between items on the screen. Observe the following general rules:

- You can specify several focus points within a widget. You do not need to activate focus points separately.

- Decide which focus point the focus is on when the widget opens.

- On key press, move focus to the closest focus point in the selected direction.

- You can allow users to select focus points to open applications, perform functions, and open popup windows.

For examples of setting focus, see the AccuWeather Example on Forum Nokia.

### Using focus on touch devices

On touch devices, users can use a finger or stylus to select items on screens. To allow users to perform their tasks fluently, enable direct manipulation of items and minimize the need to switch from touch to hardware keys. Allow users to complete their tasks using the same interaction method that they started it with.

### To specify focus points within widgets

Use the HTML Document Object Management (DOM) `focus()` method to set focus on a DOM `text` object.

    <html>
    <head>
    <script type="text/javascript">
    function setFocus()
      {
      document.getElementById('text1').focus()
      }
    function loseFocus()
      {
      document.getElementById('text1').blur()
      }
    </script>
    </head>
    <body><form>
    <input type="text" id="text1" />
    <br />
    <input type="button" onclick="setFocus()" value="Set focus" />
    <input type="button" onclick="loseFocus()" value="Lose focus" />
    </form></body>
    </html>