jQuery: On focus in textarea, Remove default text + change color , on unfocus - put text back

Question

This is a very common usecase we see on stackoverflow, facebook, etc.

You often want to give the user some text to direct him on what to do, but you want the text to disappear the moment he clicks on it.

What is the easiest way to do that via JQuery? This seems like a fairly common use case

Answer 1

I use this simple script on my search input:

$(document).ready(function () {

    searchInput = $('#search-input');
    searchDefault = 'Please enter text';

    searchInput.click(function () {
        if($(this).val() == searchDefault)
            $(this).val('');
    });

    searchInput.blur(function () {
        if($(this).val() == '')
            $(this).val(searchDefault);
    });

});

You could also assign some other functions like changing the color or some effects to the click and blur events.

Answer 2

What I think you're looking for is generally called a "watermark" - and you're right, this is very common. There are a number of jQuery plugins available to do just what you're asking.

For example: http://code.google.com/p/jquery-watermark/

Answer 3

Here we go - snippet on jsfiddler.net

jQuery:

$(function() {
    $('#placeholderText').val("Placeholder")
        .focusin(function(){
            if($(this).hasClass('initialClass'))
                $(this).removeClass('initialClass').
                    addClass('normalClass').val('');                
        })
        .focusout(function(){
            if($(this).hasClass('normalClass') && $(this).val() == '')
                $(this).removeClass('normalClass').
                    addClass('initialClass').val('Placeholder');    
        });
});

CSS:

.initialClass {
    color: #999999;
}

.normalClass {
    color: #000000;
}

HTML:

Click on me: <input id="placeholderText" type="text" class="initialClass" />

Answer 4

If the instruction text is inside the textarea you can use the toggleVal plugin. I have not used the jquery watermark plugin, it could be better so take a look at both. http://jquery.kuzemchak.net/toggleval.php

HTML:

<label for="field1">Some text to explain the text area.</label>
<textarea id="field1" name="textarea1"></textarea>

CSS:

.toggleval {
  font-style: italic;
  color:#333;
}
.tv-changed, .tv-focused {
  font-style: normal;
  color:#000;
}

Javascript:
$('.toggle').toggleVal({
    populateFrom: "label",
    removeLabels: true
});