Question

I’m trying to implement basic placeholder logic with jquery for textarea.. But there is one small issue I couldnt figure out how to fix it. Here is the html ;

<textarea class="commentInput" rows="1" cols="50" title="Say something...">
    Say something...
</textarea>

and javascript is ;

$('.commentInput').live('focus', function() {
    if ($(this).val() == $(this).attr('title')) {
        $(this).val('');
    }
});

$('.commentInput').live('blur', function() {
    if ($(this).val() == '' && $(this).attr('title') != '') {
        $(this).val($(this).attr('title'));
        $(this).attr('rows', 1);
    }
});

It’s all working fine but one case it’s broken.. Let say I type “Say something…” to textarea, and just click to somewhere else in html, and then when i focus back to textarea it’s clear the text because of jquery focus event matches the value of textarea and title of text area..

How can i solve it or anyother idea?
Thanks.

Answer 1

Keep a flag isDirty on the text area element and set the flag’s value on onKeyUp event of text area according to these rules:

• If there is a text inside the text area, then the user must have entered it so set isDirty to true;
• If the text area is empty, then set isDirty to false

UPDATE: I found a bug and following rule is added to remove that bug. When you selected the text with mouse, right clicked on it and cut the text; since there were no keyup events fired the isDirty flag remained true and functionality was lost.

Like this:

$('.commentInput').live('keyup', function() {
    var taObj = $(this);
    if ($(this).val() == '') {
        taObj.data('isDirty', false);
    } else {
        taObj.data('isDirty', true);
    }     
});

Then use isDirty flag to determine whether text should be modified or not:

$('.commentInput').live('focus', function() {
    var taObj= $(this);

    if (!taObj.data('isDirty') && taObj.val() == taObj.attr('title')) {
        taObj.val('');
    }
});

$('.commentInput').live('blur', function() {
    var taObj = $(this);

    // Following check is made to make sure text was not removed with a mouse action
    if(taObj.val() == '') {
        taObj.data('isDirty', false);
    }

    if (!taObj.data('isDirty') && taObj.val() == '' && taObj.attr('title') != '') {
        taObj.val(taObj.attr('title')).attr('rows', 1);
    }
});

Here is a fiddle example demonstrating this solution: http://jsfiddle.net/melih/WXxtg/2/