javascript - 在字段中显示 'ghosted' 示例文本，然后将其清除 onblur

Question

我正在尝试复制在 Firefox 搜索框中使用的效果，如果搜索字段没有焦点(用户没有在其中单击)，它只会显示 Google灰色文字。然后，当用户点击该框时，文本将被删除，他们可以填写他们的搜索词。

我想用它来为网络表单提供示例字段数据。

JQuery 语法比纯 javascript 更可取，但纯 JS 也可以。

非常感谢 Hive Mind!

Answer 1

<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 会使它变小，但我不使用它。