jQuery clear focus function

I had a problem on a site whereby the forms were designed so that the labels were essentially inside the text inputs. I found this looked nicer as it was less all over the place and the information of what needed to be entered in the field (e.g. email address) was easy to make out. I made the form so that when you clicked in the field, it cleared out the input. The problem here is that you now don’t know what needs to go in there. You may have lost concentration for a second and come back to the room adn thought @Was that email address or first name that needed to be entered here?’

I came up with a solution to the problem so that when you click off the input, if you have not entered any information, it puts the label back in. Its quite simple, but a nice little touch for usability. Here is how to do it using  jQuery…

Theres the standard jQuery file to include and a couple of functions I wrote using jQuery. One for the focus event (when you click in the input) and one for the blur event (when you click away from the input). Basically it uses a title on the input that is the same as the value to begin with. This is saved in a variable and once the input is focussed on and then the input is cleared so you can type away.
When you move away from the input, if nothing has been entered, it will replace it with the original value that was saved in the variable from the title. kind of like I have noticed a lot of forms on Facebook have started doing to clear and replenish unentered fields.

Below is the javascript code I use when doing this:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){

var clearMePrevious = '';

// clear input on focus
$('.clearMeFocus').focus(function()
{
if($(this).val()==$(this).attr('title'))
{
clearMePrevious = $(this).val();
$(this).val('');
}
});

// if field is empty afterward, add text again
$('.clearMeFocus').blur(function()
{
if($(this).val()=='')
{
$(this).val(clearMePrevious);
}
});
});

</script>

And here is the way I code the text inputs.

<input type="text" name="email" title="Enter your email" value="Enter your email" class="clearMeFocus" />

The class ‘clearMeFocus’ is used so you know which fields on a form want to use this feature and also to grab the title and value from it. (I guess you don’t have to use that to get the info though…)

I have also put up an example of the jQuery functions and the form in action. It’s a simple form, but you get the idea…it can be found here.

18 Comments

  1. I do this one better: by positioning the label over the field instead of putting the label in the field as text, I can leave the label there even while the field has focus, hiding it only when the user actually enters text. See for example the search field at http://foneshow.com/

  2. That’s a different solution. I’m not sure it’s that intuitive though. I think I would expect the field to clear when I clicked inside it so I could start typing. I find myself trying to select the label and clear it rather than start typing over it.

  3. Instead of creating the variable and doing this:
    $(this).val(clearMePrevious);

    you could just do this:
    $(this).val() = $(this).attr(’title’);

  4. @eep

    Thanks for this example – I’m just getting started with JQuery so this kind of thing really helps.

    After some fiddling around I found that this didn’t work for me:

    $(this).val() = $(this).attr(‘title’);

    But this did:

    $(this).val($(this).attr(‘title’));

  5. One of the great features of jQuery is the ability to chain events. To save on a few bytes of characters the entire script can be condensed to:

    $(document).ready(function () {
    $(“.searchinput”).focus(function () {
    if ($(this).val() === $(this).attr(“title”)) {
    $(this).val(“”);
    }
    }).blur(function () {
    if ($(this).val() === “”) {
    $(this).val($(this).attr(“title”));
    }
    });
    });

  6. Won’t the blur function change the input value when you move focus to the submit button?

    Seems like this probably doesn’t work irl

  7. An issue with this code is encountered if you have multiple inputs, the value of clearMePrevious gets placed into the wrong fields.

    JavaScript has a nifty attribute that people tend to forget called .defaultValue which stores the default value of a field no matter what you change it to.

    I’ve modified your code as follows and it works wonderfully.
    // clear input on focus
    $(‘.clearMeFocus’).focus(function(){
    if($(this).val()==this.defaultValue){
    $(this).val(”);
    }
    });

    // if field is empty afterward, add text again
    $(‘.clearMeFocus’).blur(function(){
    if($(this).val()==”){
    $(this).val(this.defaultValue);
    }
    });

  8. Is this code compatible with newer versions of jQuery?

    There is no demo on this page, so I can’t check which jQuery version you are using with your script. Additionally, this blog entry was also started almost two years ago. I see you are currently using version 1.4.2 on this page, but with no demo, I’m assuming you are using version 1.4.2 with your script.

    I have not been able to get this working with version: jquery-1.4.4.min.js

    I’ve tried both the original by Nic Boldson and also Patrick’s code to no avail.

    Thanks for any input you can offer with my questions. A working website link would allow me to debug it myself and avoid you typing a detailed reply. If you don’t want to send a link to a personal website, then you have my email address in my post here and I’d be grateful if you could send it along so I can debug the issue.

    Thanks
    Don

    • Hi Don,

      It should work fine with all versions of jQuery as it’s using the standard syntax. Patrick’s version is a lot slicker and I’ve been using that since πŸ™‚

Leave a Reply