Html 如何使我的搜索字段显示一些文本,并在它';s咔嗒一声

Html 如何使我的搜索字段显示一些文本,并在它';s咔嗒一声,html,forms,Html,Forms,我希望我的搜索栏上写着“你在哪里”,当他点击时,搜索栏消失,当他在外面点击时,搜索栏空白 这是搜索表单: <div id="search-10" class="widget_search"> <form role="search" method="get" id="searchform" action="http://chusmix.com/?s=" onsubmit="window.location = action + s.value + '+: <?php the_

我希望我的搜索栏上写着“你在哪里”,当他点击时,搜索栏消失,当他在外面点击时,搜索栏空白

这是搜索表单:

<div id="search-10" class="widget_search">
<form role="search" method="get" id="searchform" action="http://chusmix.com/?s=" onsubmit="window.location = action + s.value + '+: <?php the_search_query() ?>'; return false;">
 <div>
 <input class="ubicacion" type="text" value="" name="s" id="s2" style="margin-left:0px;">
 <input type="submit" id="searchsubmit" value="Buscar">
 </div>
 </form></div>


使用div伪造输入的边框,并将真实输入和标签放置在其中-一个位于另一个之上

当元素获得焦点时隐藏标签,如果值为空,则在焦点丢失时将其放回


有一个问题。

有关原始javascript,请参见下面的示例-

<input type="text" onblur=" if(this.value== '') this.value='Where are you';" onfocus=" if(this.value=='Where are you') this.value=''; " value="Where are you" name="keyword" />


除此之外,您还可以使用jquery、dojo、mootools插件来处理此问题。

这将在用户单击搜索表单时删除默认文本,并在用户单击搜索表单时将其添加回

<form id="searchform" method="get" action="search.php">
<input class="textbox" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" type="text">
<input type="submit" id="searchsubmit" value="" class="searchsubmit" />
</form>


谢谢。我正试图将其更改为在我的代码中使用,但我遇到了一些问题。出于某种原因,当我将其放在我的页面上时,它不起作用,甚至当我复制粘贴它而不更改任何内容时也不起作用。如果您复制/粘贴它而不更改任何内容,那么jQuery的路径将是错误的。对不起,我应该指出我对web设计非常陌生。我甚至不知道jQuery是什么,jQuery是一个库。它包含一大堆函数,使JS程序员的生活更加方便。另请参见YUI和Mootools(以及其他)。请不要滥用该值作为标签。这不是它的用途,对于屏幕阅读器(在阅读内容之前关注元素)来说,它永远不会可读。最终它还是不起作用,因为某种原因,当我将它与搜索栏混合时,它就停止工作了。你可能会犯错误,请仔细检查我为此更改了第5行(我在上面复制了它,以便更清楚):''你已经把value=“公共汽车”放进去了。是否希望Buscar作为默认值?如果是,请尝试以下方法-
<form id="searchform" method="get" action="search.php">
<input class="textbox" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" type="text">
<input type="submit" id="searchsubmit" value="" class="searchsubmit" />
</form>