Javascript 在字段中显示“重影”示例文本，然后在模糊上清除它

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

我想用它为web表单提供示例字段数据

JQuery语法比普通javascript更可取，但普通JS也可以

谢谢你的好意

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

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

我还没有测试过这个，但它应该可以工作

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

---

刚刚为你准备了这个。我确信jQuery会使它变小，但我不使用它。

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

另一种方法是使用一些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>

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规范中明确支持：

对于老版本，有一个jquery插件提供了可以找到的垫片实现

要设置占位符文本的样式，请参阅以下示例：

---

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

对于老版本，有一个jquery插件提供了可以找到的垫片实现

要设置占位符文本的样式，请参阅以下示例：

---

这方面有问题：1。如果您将其留空，则不会重新调整。2.不支持选项卡3。没有鬼文本4。如果重新聚焦，则清除用户文本。出现问题：1。如果您将其留空，则不会重新调整。2.不支持选项卡3。没有鬼文本4。如果重新聚焦，则清除用户文本。只有我会将颜色切换替换为css类切换。这有一些问题。如果您提交此表单而不更改值，则Google将作为您的文本发送。这可能不是你想要的。即使你过滤服务器端的值，客户端浏览器也会存储该值，并在将来的页面视图中将其用作默认值。只有我会用css类切换替换颜色切换。这有一些问题。如果您提交此表单而不更改值，则Google将作为您的文本发送。这可能不是你想要的。即使您过滤服务器端的值，客户端浏览器也会存储该值，并将其用作未来页面视图的默认值。