Показать пример текста с призраками в поле, а затем очистить его при размытии

  $(selector).text('Google'); 
  $(selector).click(function(){
    $(this).text('');
  });

Вероятно, есть более элегантный способ сделать это, но при этом предполагается, что в вашем поле нет текста при загрузке страницы. Если это так, вы можете удалить первую строку.

Я не тестировал это, но должно работать.

<style type='text/css'>
      input #ghost { color: #CCC; }
      input #normal { color: #OOO; }
</style>

<script type='text/javascript'> 
    function addTextHint(elem, hintText)
    {       
        if (elem.value == '')   
        {       
            elem.value = hintText;
            elem.style.className = 'ghost';
        }

        elem.onfocus = function ()
        {           
            if (elem.value == hintText)         
            {
                elem.value = '';
                elem.className = 'normal';
            }
        }

        elem.onblur = function ()
        {
            if (elem.value == '')
            {
                elem.value = hintText;
                elem.className = 'ghost';
            }
        }           
    }

    addTextHint(document.getElementById('foobar'),'Google');
</script>

Просто придумал это для вас. Я уверен, что jQuery сделает его меньше, но я им не пользуюсь.

Другой способ - использовать некоторый CSS, создать изображение с нужным фоновым текстом и установить его в качестве фонового изображения текстового поля, а затем, когда текстовое поле окажется в фокусе, вы можете переключить стили, чтобы удалить это фоновое изображение.

Зачем катить собственное? Используйте этот плагин.

Реализация JQuery

<input type = "text" id = "textField" value = "Google" class = "RegularText GhostText" />

<style>
.GhostText{color:#DDD}
.RegularText{color:#CCC}
</style>

<script type = "text/javascript" language = "javascript">
$("#textField").blur(function(e){
    if ($.trim(e.target.value) == "") {
        e.target.value = e.target.defaultValue;
        e.target.toggleClass("GhostText");
    }
});
$("#textField").focus(function(e){
    if ($.trim(e.target.value) == e.target.defaultValue) {
        e.target.value = "";
        e.target.toggleClass("GhostText");
    }
});
</script>

Этот метод настолько широко используется, что теперь он явно поддерживается в спецификации HTML через атрибут placeholder во входном теге:
Атрибут заполнителя HTML

Он уже поддерживается в большинстве браузеров., а для более старых есть плагин jquery, обеспечивающий реализацию прокладки, которую можно найти здесь.

Чтобы стилизовать замещающий текст, обратитесь к этому (включая живые примеры):
Стили HTML5-заполнителя с помощью CSS