Question

I found this online:

var x = 0; // count for array length

$("input.placeholder").each(function(){
    x++; //incrementing array length
});

var _values = new Array(x); //create array to hold default values

x = 0; // reset counter to loop through array

$("input.placeholder").each(function(){ // for each input element
    x++;
    var the_default = $(this).val();
    var default_value = $(this).val(); // get default value.
    _values[x] = default_value; // create new array item with default value
});

var current_value; // create global current_value variable

$('input.placeholder').focus(function(){
    current_value = $(this).val(); // set current value
    var is_default = _values.indexOf(current_value); // is current value is also default value

    if(is_default > -1){ //i.e false
        $(this).val(''); // clear value
    }
});

$('input.placeholder').focusout(function(){
    if( $(this).val() == ''){ //if it is empty...
        $(this).val(current_value); //re populate with global current value
    }
});

As you can see, it grabs the text within a value attribute and sets it as the default_value. It then checks the current_value against the default.

I’m running into a problem.

In this example, we have an element like:

<input type="text" class="placeholder" value="potato">

If the user focuses and unfocuses the input, it works great – removing and repopulating with “potato”.

However, let’s say a user enters “ioqiweoiqwe”, and then unfocuses the input (fills out the rest of the form”). They then go back to our input and delete all of their text, and click on another field. The input would be re-populated with “ioqiweoiqwe” – when really, we want it to be re-populated with the default_value. How do I manage to do this?

Yours sincerely,
a jQuery nub.

Note: I set up a jsfiddle here… a bit after some comments: http://jsfiddle.net/xmhCz/

Answer 1

I don’t really know what the problem with that code is, but it looks like it was written by someone who didn’t know much JavaScript. I rewrote the functionality:

$("input.placeholder").each(function() {
    var me=$(this);
    var defaultValue=me.val();
    me.focus(function() {
        if(me.val()===defaultValue) {
            me.val("");
        }
    });
    me.blur(function() {
        if(me.val()==="") {
            me.val(defaultValue);
        }
    });
});

Test it out on JSFiddle.