Question

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

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

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会让它更小我确定，但我不使用它。

Answer 2

这种技术非常常用，现在通过输入标签的占位符属性在HTML规范中明确支持：
HTML placeholder Attribute

It's already supported in most browsers对于旧版本，有一个jquery插件提供了可以找到的填充实现here。

有关占位符文本的样式，请参阅此（包括实时示例）：
HTML5 Placeholder Styling with CSS

Answer 3

另一种方法是使用一些CSS，使用您想要的背景文本创建图像，并将其设置为文本框的背景图像，然后当文本框获得焦点时，您可以切换样式以删除该背景图像。

Answer 4

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>

Answer 5

为什么要自己动手？使用this plugin。

Answer 6

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

这可能是一种更优雅的方式，但这假设您的框在页面加载时没有文本。如果是，您可以删除第一行。

我没有对此进行过测试，但它应该有效。

在字段中显示“幻影”示例文本，然后将其清除为onblur

6 个答案: