Question

Ive noticed, on a few sites, that some text boxes have spinning ‘loading’ images in them when a person finishes entering data.

Eg: On a registration page, when a user enters a nickname. When they are dont, the system checks the DB to see if it is unique.

In this time, the text box displays a spinning loader INSIDE of it, and then a tick or cross image (replacing the loader) if the name is valid or not.

How would I go about implementing that?

Answer 1

You have to strip out all the default style of a textbox and rebuild it yourself with background images and other styles. In addition, you would need to implement AJAX to handle any checks against a database. Not something easy to answer in this format, but I would suggest using FireBug to explore the site you like and see what they have done.

EDIT:

This isn’t exactly what you are looking for, but this might help. I added a bunch of custom styling to a textbox and other than a little JS to show/hide the AJAX spinner, hopefully this will get you part of the way there.

HTML:

<div id="search_box">
    <input id="txt_search" type="text" />
    <img src="/images/btn_submit.png" alt="Submit" id="btn_search" />
</div>

CSS:

#search_box {background:url(/images/txt_main.png) 0 0 no-repeat;height:40px;margin:0 auto;position:relative;width:386px;}
#search_box input 
{
    background:none;
    border:0;
    font-family:Tahoma,Arial,Helvetica,sans-serif;
    font-size:20px;
    line-height:20px;
    margin:2px 0 0 1px;
    outline:none;
    padding:6px;
    width:330px;
    -webkit-appearance:none;
    -webkit-border-radius:0;
}
#search_box img {float:right;margin:5px 6px 0 0;}

EDIT:

Attaching image.