Question

这是我的问题：

当搜索框聚焦时，它会变成这样的

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

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

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

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

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

2 个答案: