在字段中显示'幻影'示例文本，然后将其清除onblur [英] Show 'ghosted' example text in a field, and then clear it onblur

问题描述

我试图复制Firefox搜索框中使用的效果，如果搜索字段没有焦点（用户没有点击它），它只是说 Google in灰色文本。然后，当用户在框中点击时，文本被删除，他们可以填写他们的搜索字词。

我想用它来提供示例字段数据web form。

JQuery语法比普通的javascript更好，但是普通的JS也可以。

感谢SO Hive Mind！

解决方案

 < style type ='text / css'> ; 
输入#ghost {color：#CCC; } 
 input #normal {color：#OOO; } 
< / style> 
 
< script type ='text / javascript'> 
函数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'; 
 
 
 
 $ b addTextHint（document.getElementById（'foobar'），'Google'）; 
< / script> 
  

只是为您打了折扣。 jQuery可以让它更小我确定，但我不使用它。

I'm trying to duplicate the effect used in the Firefox search box where, if the search field does not have focus ( the user has not clicked inside of it ), it just says Google in gray text. Then, when the user clicks in the box, the text is removed and they can fill in their search term.

I want to use this to provide example field data for a web form.

JQuery syntax would be preferable to plain javascript, but plain JS would be fine too.

Thanks SO Hive Mind!

解决方案

<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>

Just whipped this up for you. jQuery would make it smaller I'm sure, but I don't use it.

这篇关于在字段中显示'幻影'示例文本，然后将其清除onblur的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！