我想在我的网页上的搜索框显示字“搜索”在灰色斜体。当框接收到焦点时,它看起来就像一个空文本框。如果其中已经有文本,则应该正常显示文本(黑色,非斜体)。这将帮助我避免混乱的标签。

顺便说一句,这是一个页面Ajax搜索,所以它没有按钮。


当前回答

最好的方法是使用某种JavaScript库(如jQuery或YUI)将JavaScript事件连接起来,并将代码放在外部的.js文件中。

但如果你想要一个快速的解决方案,这是你的内联html解决方案:

<input type="text" id="textbox" value="Search"
    onclick="if(this.value=='Search'){this.value=''; this.style.color='#000'}" 
    onblur="if(this.value==''){this.value='Search'; this.style.color='#555'}" />

更新:增加了要求的着色材料。

其他回答

前段时间我在我的网站上发布了一个解决方案。要使用它,请导入一个.js文件:

<script type="text/javascript" src="/hint-textbox.js"></script>

然后用CSS类hintTextbox注释任何你想要有提示的输入:

<input type="text" name="email" value="enter email" class="hintTextbox" />

更多的信息和例子可以在这里找到。

当页面第一次加载时,让搜索出现在文本框中,如果你想要它是灰色的。

当输入框接收到焦点时,选择搜索框中的所有文本,这样用户就可以开始输入,这会在此过程中删除所选文本。如果用户想要第二次使用搜索框,这也会很好地工作,因为他们不需要手动突出显示之前的文本来删除它。

<input type="text" value="Search" onfocus="this.select();" />

我使用了一个简单的,一行javascript解决方案,它的工作很棒。这里有一个文本框和文本区域的例子:

    <textarea onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">Text</textarea>

    <input type="text" value="Text" onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">

唯一的“缺点”是在对字段值做任何事情之前在$_POST或Javascript验证中进行验证。意思是,检查字段的值是不是“Text”。

你可以添加和删除一个特殊的CSS类,用JavaScript修改输入值onfocus/onblur:

<input type="text" class="hint" value="Search..."
    onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
    onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">

然后在CSS中指定一个样式提示类,例如:

input.hint {
    color: grey;
}

你可以很容易地有一个框读“搜索”,然后当焦点改变到它有文本被删除。就像这样:

< onfocus =“这个输入。价值=“类型”=“文本”=“搜索”/>

当然,如果你这样做,用户自己的文本将消失时,他们点击。所以你可能想要使用更健壮的东西:

<input name="keyword_" type="text" size="25"  style="color:#999;" maxlength="128" id="keyword_"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#999';"
onfocus="this.value=''; this.style.color = '#000';"
value="Search Term">