Jumping to the First Field with Auto focus in html5

Jumping to the First Field with Auto focus in html5

You can really speed up data entry if you place the user’s cursor in the first field on the form when they load the page. Many search engines do this using JavaScript, and now First Field with Auto focus provides this capability as part of the language.All you have to do is add the auto focus attribute to any form field, like we already did on the profile page we built in.

<label for="name">Name </label> 
<input type="text" name="name" auto focus id="name">

You can have only one auto focus attribute on a page for it to work reliably. If you have more than one, the browser will focus the user’s cursor onto the last auto focused form field.

Falling Back to the First Field with Auto focus in html5

We can detect the presence of the First Field with Auto focus attribute with a little bit of JavaScript and then use j Query to focus on the element when the user’s browser doesn’t have auto focus support. This is probably the easiest fallback solution you’ll come across First Field with Auto focus.

function hasAutofocus() { var element = document.createElement(
'input' );
in element;
$(function(){ if(!hasAutofocus()){ $( 'input[autofocus=true]' ).focus(); } });

SOme Speech About First Field with Auto focus

Just include this JavaScript on your page, and you’ll have autofocus support where you need it.

Auto focus makes it a little easier for users to start working with your forms when they load, but you may want to give them a little more information about the type of information you’d like them to provide. Let’s take a look at the placeholder attribute next First First Field with Auto focus.