jQuery input value focus and blur

Question

I have the following code so that when a users selects an input box the value will disappear, but the default value will then be re-inserted once a user clicks off it.

        $(function() {
            var defaultText = '';
            $('input[id=input]').focus(function() {
                defaultText = $(this).val();
                $(this).val('');
            });
            $('input[id=input]').blur(function() {
                $(this).val(defaultText); 
             });
         });

However, that's not exactly how I want it. If a user inserts text I don't want the default text to then override what the user has put. I'm also fairly new to jQuery so any help would be greatly appreciated.

Solution 1

In your focus() method you should check to see if it equals the defaultText before clearing it, and in your blur() function, you just need to check if the val() is empty before setting the defaultText. If you are going to be working with multiple inputs, it's better to use a class rather than ID, so your selector would be input.input when the class is "input". Even if it was an ID, you would reference it as input#input.

// run when DOM is ready()
$(document).ready(function() {
    $('input.input').on('focus', function() {
        // On first focus, check to see if we have the default text saved
        // If not, save current value to data()
        if (!$(this).data('defaultText')) $(this).data('defaultText', $(this).val());

        // check to see if the input currently equals the default before clearing it
        if ($(this).val()==$(this).data('defaultText')) $(this).val('');
    });
    $('input.input').on('blur', function() {
        // on blur, if there is no value, set the defaultText
        if ($(this).val()=='') $(this).val($(this).data('defaultText')); 
    });
});

Set it in action in this jsFiddle.

Solution 2

In your blur handler just check if the user has not write anything, in that case put back the default text, like this:

         $('input[id=input]').blur(function() {
            if ($(this).val() == '') {
                $(this).val(defaultText); 
            }
         });

Comments

[Karl]

Should be $(this).val() == but thanks, I feel a bit stupid for not thinking of that :P

[Nelson]

Yes, I noted that right after posting and edited my answer afterwards to fix it. Hope this has been useful for you.

[Karl]

I can't set the defaultText within the function, simply because it's going to be used in a lot of places and I don't want to make the js file huge. Is there any work around, because atm if a user types something, then clicks on the input again it gets changed to ''.

[doublesharp]

@Karl this doesn't set the defaultText in the function. Do you want the default to be whatever the input has when the form was loaded?

[Karl]

var defaultText = 'Your default text.'; It does. There are different inputs, each with a different defaultText. I need it to not clear the input if a user has inserted something and clicked off, then clicked back on it.

[doublesharp]

@Karl I just updated the code to take the initial value and save it to the DOM object using data() - from that point on it refers to this value as the "default" and sets it onBlur when the input is blank, and onFocus clears it if it is equal.

[doublesharp]

as another tip, if you don't want it to be set to the initial value, you can set it by adding a property of data-defaultValue="your text" to the input.