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.

Louella

Are you trying to put a placeholder? – Chiaroscuro

You have an issue with both setting and unsetting your defaultText... on focus it is changing the defaultText value to whatever the current value of the input is. – Likeminded

Answer 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.

Likeminded

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 ''. – Louella

@Louella 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? – Likeminded

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. – Louella

@Louella 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. – Likeminded

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. – Likeminded

Answer 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); 
            }
         });

Succession

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

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

Answer 3

An old question + I dislike it when people offer another solution instead of fixing my problem but nonetheless: Using a HTML placeholder attribute with a jQuery plugin would solve the issue.

You could also use the HTML data- attributes and write/read from that.

Polycythemia