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

【问题标题】：Show 'ghosted' example text in a field, and then clear it onblur在字段中显示“幻影”示例文本，然后将其清除 onblur
【发布时间】：2010-09-22 01:23:37
【问题描述】：

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

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

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

感谢 SO Hive Mind！

【问题讨论】：

标签： javascript jquery html forms field

【解决方案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 会让它变小，但我不使用它。

【讨论】：

只有我会用 css 类切换替换颜色切换。
这有一些问题。如果您提交此表单而不更改值，则“Google”将作为您的文本发送。这可能不是你想要的。即使您过滤值服务器端，客户端的浏览器也会存储该值并将其用作未来页面查看的默认值。

【解决方案2】：

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

It's already supported in most browsers，对于较旧的，有一个 jquery 插件提供 shim 实现，可以在 here 找到。

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

$(选择器).text('谷歌'); $(选择器).click(函数(){ $(this).text(''); });

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

我没有对此进行测试，但它应该可以工作。

【讨论】：

这有什么问题： 1. 如果您留空，则不会重新清除。 2. 不支持标签 3. 不重影文本 4. 如果重新聚焦则清除用户文本。