javascript - 如何将默认文本添加到搜索栏？

Question

这是我的问题：

当搜索框获得焦点时，它会变成这样

--------------------

--------------------

离开搜索框后，一个字符串会自动添加到搜索框

--------------------
Search
--------------------

我想要的是当搜索框获得焦点时，将有一个默认字符串Search，当用户编写内容时，整个字符串Search将替换为用户输入的字符串：

一旦用户完成搜索并想要再次搜索搜索框包含之前的字符串，我想要的是当用户单击搜索框时，它将自动删除搜索框中存在的字符串并将其设置为默认字符串。

这是我到目前为止的代码：

<div id="search">
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>" >

<input id="s"  type="text" name="s" onfocus="if(this.value=='search site')
    {this.value=''};" onblur="if(this.value==''){this.value='search site'};" 
    value="<?php echo wp_specialchars($s, 1); ?>" />

<input id="searchsubmit" type="submit" value="" />
</form>

    </div>
    <div class='clear'></div>

Answer 1

如果您使用的是 HTML5 规范，则可以简单地使用该placeholder属性，如下所示：

<input id="s" type="text" name="s" placeholder="Search..." />

这将完全按照您的描述运行。

http://davidwalsh.name/html5-placeholder

Answer 2

可能你正在谈论这个

<input id="s" type="text" name="s" />
<script>
function addEvents(id) {
    var field  = document.getElementById(id);
     field.onfocus  = function ()  {
        this.value  = "";
    };
     field.onblur  = function ()  {
        if (this.value  == "")  {
            this.value  = "Search";
        }
    };
}
addEvents("s");
</script>