Focus

Where are we?

You know how to show an input field, and get data from the user. Let’s improve the page’s usability.

This page’s goals

By the end of this page, you should know how to use focus() to improve a page’s usability.

A basic page

Please try this page. We’ll use it for this lesson and the next.

Here’s the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Favorite Game</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#game_in").focus();
        $("#go").click(function() {
          user_game = $("#game_in").val();
          $("#game_out").text(user_game);
        });
      });
    </script>
  </head>
  <body>
    <h1>Favorite Game</h1>
    <p>Please enter the name of your favorite game 
    (e.g., fetch, frisbee, chewing shoes). Then click the button.</p>
    <p>Game: 
      <input type="text" id="game_in">
      <button type="button" id="go">Go</button>
    </p>
    <p>Favorite game: <span id="game_out"></span></p>
  </body>
</html>

Figure 1. Starting the game

Let’s look at the JS code:

<script type="text/javascript">
  $(document).ready(function() {
    $("#game_in").focus();
    $("#go").click(function() {
      user_game = $("#game_in").val();
      $("#game_out").text(user_game);
    });
  });
</script>

Figure 2. The JS code

Most of it is familiar. There’s ready(), click(), val(), and text(). But what’s that focus() in line 9? Line 9 is in the ready() event, so it runs when the page loads.

What’s focus()?

To see what focus() does, let’s look at another version of the page. It has the following code:

<script type="text/javascript">
  $(document).ready(function() {
//    $("#game_in").focus();
    $("#go").click(function() {
      user_game = $("#game_in").val();
      $("#game_out").text(user_game);
    });
  });
</script>

Figure 3. Modified JS code

In this version, I’ve commented out line 9. That’s the only difference.

OK, let’s compare them. Follow these instructions carefully. Don’t do anything extra. Not even a single click.

  1. Click this link to open the original page.
  2. Don’t click on anything. Just type “barking”.

You should see this:

With focus

Figure 4. With focus()

Now do this:

  1. Click this link to open the modified page.
  2. Don’t click on anything. Just type “barking”.

This is what you should see:

Without focus

Figure 5. Without focus()

Huh!? Where did the barking go?

It has to do with the focus. Watch this movie:

The Camtasia Studio video content presented here requires a more recent version of the Adobe Flash Player. If you are you using a browser with JavaScript disabled please enable it now. Otherwise, please update your version of the free Flash Player by downloading here.

Figure 6. About focus()

Here’s the code again:

<script type="text/javascript">
  $(document).ready(function() {
    $("#game_in").focus();
    $("#go").click(function() {
      user_game = $("#game_in").val();
      $("#game_out").text(user_game);
    });
  });
</script>

Figure 2 (again). The JS code

Line 9 is bound to the ready() event. It runs when the page loads. It sets the focus to the input field, so the user is ready to type. Try the page, and you’ll see that the input cursor is in the field.

Without line 9, the user has to click on the field before s/he can type into it. If the user doesn’t click on the field, and just starts typing, the data is lost. The user’s keystrokes go somewhere, but not into the field.

Line 9 makes the page more usable. That is, it makes it easier for the user to do a task. Usability is important on the Web. Webers think about work flow, that is, the sequence of actions needed to do a task. If they can eliminate steps from the work flow, they will.

The thing we did in line 9 is common. Try going to Google’s home page. Where is the cursor?

Try going to Bing. Where is the cursor when the page loads?

Try Twitter. After you have logged in, where is the cursor?

We’ll talk more about usability as we go.

Exercise: Focus

Change your Hello world solution. When the page loads, the cursor should be in the first name.

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Summary

You learned how to use focus() to improve a page’s usability.

What now?

Let’s do some styling to change the look of input fields.


How to...

Lessons

User login

Log in problems? Try here


Dogs