Join Joe Marini for an in-depth discussion in this video Designating a default active form field using the autofocus attribute, part of HTML5: Web Forms in Depth.
In this chapter we're going to take a look at the new form attributes that you can use in your HTML5 forms, as well as the text selection APIs and the CSS styling features. We're going to start by looking at the autofocus attribute. The autofocus attribute indicates to the browser that the control it's applied to should receive the focus when the page loads. Now each document should only have one element with this attribute in it. The way you use it is pretty simple. On the input that you want to have the auto focus you simply put the autofocus attribute anywhere on the line, and you can see I've put it here in bold type and that's pretty much how you use it.
So let's jump over to the code and see how it works. So here I am in the code. I'm in the Autofocus section of my ExampleSnippets file and if you're following along you can use the ExampleSnippets text file. This is where I keep all of my snippets so that you don't to watch me type. You can just copy and paste right along with me. So I'm going to open up my autofocus_start file and you can see I am going to scroll down. So this is the file we're going to apply autofocus to. The first thing I want to do is just quickly show this to you in the browser.
So when I bring this file up you'll see that nobody gets focused right away, even though I have three fields down here. So what I'm going to do is go into my document here and I'm just going to type autofocus. So now when I save and I bring this up in a browser that supports the autofocus attribute, and I'm going to be using Opera. Opera turns out so far provides the most complete support for HTML5 web forms.
The first line of code here is using jQuery and I'm using the document's ready function which is equivalent to the loading function. This fires when DOM of the document is ready. So this is sort of just putting in some initialization code. When this function runs we're going to use Modernizr to see if the browser supports the autofocus attribute. To do that all I need to do is type modernizr.input.autofocus and if this browser does not support the autofocus attribute, then I simply use jQuery to look for the input element that has an autofocus attribute and call focus on it.
So I'm going to save this and now I am going to back out to my example, and I'm just going to bring this up in IE and you'll see that I'm getting the same behavior now as I was getting in Opera. So now the second form field has the input focus, because that's where the autofocus attribute is. Using the autofocus attribute you can assign a text field to receive the input focus when the page loads automatically.
- Autofilling previously entered data with autocomplete
- Constraining form field data with a regular expression
- Using text-selection APIs
- Building CSS styling for invalid, valid, and required fields
- Creating a search field
- Including a phone number input field
- Formatting number fields
- Building a date picker
- Creating a list of suggested entries
- Indicating measurements