Subscribe to our RSS

How to Add Hints & Auto Focus Form Fields using jQuery

Tags: , , ,

How to Add Hints & Auto Focus Form Fields using jQuery

This tutorial teaches you how to easily add hints to your forms and auto focus fields.

We are continuing a series of quick articles for web developers which explain how to automate things during website programming. Today we will talk about forms and two usability items the every current website should have:

  • Auto Focus Fields. The first field in the form should be focused by default, so that the user can start entering his password or name right after page loaded and would not have to click the field to start typing. This is a small and obvious usability items, but still a very important one.
  • Hints. Forms should have quick tips for fields which requires entering data in a specific format (for example email address, phone number, date / time, etc.)

So, let’s say our website have this contact form:

screen-1

Auto Focus

Full Name – this field will be automatically focused when the page loads, here is how it will be coded in the markup:

<input type="text" name="fullname" id="fullname" class="auto-focus" />

Notice the field has ‘auto-focus’ class. This is so that any field in the form with this CSS class will be automatically focused on page load.

The auto focus can be implemented in JavaScript:

$('.auto-focus:first').focus();

2.) Email Address (the same for phone number and message fields) – If the field does not contain any value it will show a quick tip on the required data format. When the user clicks the field, the tip will disappear and let the user enter data. Here is how it will look in the markup:

<input type="text" name="email" id="email" title="i.e. me@example.com" class="auto-hint" />

As you see, our hint will be stored in ‘title’ attribute of the field. This will let user see it when the field already contains a value in it.

By default, the color of text in input field will be black, we need to differentiate the color of the hint and common input value. Let’s set this color in CSS:

<style type="text/css">
    .auto-hint { color: #AAAAAA; }
</style>

Now we move to JavaScript implementation. At first we should display the hint in fields which have empty values:

$('INPUT.auto-hint, TEXTAREA.auto-hint').focus(function(){
    if($(this).val() == $(this).attr('title')){
        $(this).val('');
        $(this).removeClass('auto-hint');
    }
});

And handle focus / blur events:

$('INPUT.auto-hint, TEXTAREA.auto-hint').blur(function(){
    if($(this).val() == '' &amp;&amp; $(this).attr('title') != ''){
       $(this).val($(this).attr('title'));
       $(this).addClass('auto-hint');
    }
});

$('INPUT.auto-hint, TEXTAREA.auto-hint').each(function(){
    if($(this).attr('title') == ''){ return; }
    if($(this).val() == ''){ $(this).val($(this).attr('title')); }
    else { $(this).removeClass('auto-hint'); }
});

That’s it! ;) Click the Demo button to see it in action.

Screenshots

Abu Hamzah

April 23, 2012

does not work with asp.net control textarea textbox, have you tried using?

christophe

April 18, 2012

I’d recommend using the HTML5 attribute ‘placeholder’ for this, and use a polyfill for older browsers that don’t support it:

https://github.com/mathiasbynens/jquery-placeholder

GT

February 13, 2012

@Jd – did you not see the script that Phil provided above in the comments thread on how to handle submission?

My problem with this method is that it defeats standard client side validation. You’ll need to write customized validation to include testing for the title string as if it’s an empty field. Otherwise, this is a great script.

Thomas

May 2, 2011

Thanks for this helpful script, I have used it 3 times already. Also a classy way to handle someone so rude. I will follow this blog because of that.

Phil

April 20, 2011

Here is how to clear the fields that have the title set as the content. Just make sure your title can’t be a possible value a user might enter:

$(’form’).submit(function(){
$(’.auto-hint’).each(function(){
if($(this).attr(’title’) == $(this).val()){
$(this).val(”);
}
});
});

Phil

April 20, 2011

And by & & I meant:

& &

Or if that doesn’t show then HTML entity escaped ampersands.

Phil

April 20, 2011

Couple of issues with this:

1. You’ve got & & in your source code which should obviously be a logical and.
2. When submitting the form, if any of the fields have not been filled they will contain the default text. A bit of extra JS is needed to remove it on submission.

Mitziman

March 16, 2011

hey,

your jquery snippets got mixed up a little.

ajaxBlender.com

June 23, 2010

rp,

From the tone of your comment, I can see you must be a valuable addition to any online community. Welcome to ajaxBlender! :p

Anyway, you probably didn’t realize that this selector is done in jQuery. The code will find the first input field with the ‘auto-focus’ class and focus it, so that the user will not have to click the field with the mouse to start typing. This method is a MUST for a user-friendly web page containing forms.

Thank you for your response, though.

Alex

rp

June 18, 2010

$(’.auto-focus:first’).focus();

?

what is this? It appears you neglected to type the complete code. If you aren’t going to do it right, don’t do it at all.

Leave a comment

Your name

October 26, 2014

Spam protection. Enter result of expression you see in the box below.

5 + 9 =