这将是一个总的新手问题,但是我真的不能做一个谷歌搜索引擎,因为我不确定它叫什么。
您知道StackOverFlow右上角的快速搜索栏吗?
您知道如何在其中编写“搜索”,单击它时,它变成空白,什么是实现此目的的最佳方法?
我看到javascript在stackoverflow中具有此功能。
onfocus="if (this.value=='search') this.value = ''" value="search"
但是如果我有一个单独的搜索按钮,并且用户没有关注该搜索条件(它有多个搜索条件),则需要考虑“搜索”。
我需要做类似的事情
if(textbox1.Text == "search")
{
textbox1.Text = "";
}
不得不将文本(“搜索”)放在3个地方似乎有点烦人。标记两次,后面的代码一次。
还有另一种方法吗?
您要查找的术语是“占位符”。除了手动操作外,随着时间的流逝,HTML5 placeholder
attribute得到更多浏览器的支持。
看起来像SO搜索一样,如果文本是搜索,onFocus会清除文本。您可以通过在该框中键入搜索来证明这一点,单击某处,然后在文本框中单击返回,然后将其删除。使用“测试”执行相同的操作,并且不会将其删除。
如果最终要手动实现,请确保在多个位置使用常量而不是使用“搜索”。使用常量不太容易出错,因为您不会键入错误,并且如果更改了要更改的内容,则只需在一个地方进行更改。
是的,还有其他方法,但是所有这些方法都需要输入3次以上的内容,而不仅仅是“搜索”。
例如,您可以像这样在类中放置一个常量字符串:
placeholder
然后,在您的课堂上,您会说出这样的话:
const string SearchText = "search";
然后在aspx页面中,您会说:
if(textbox1.Text == SearchText)
{
textbox1.Text = "";
}
现在,只写“搜索”一词三遍似乎不那么简单吗?
如果您在按钮上写有“搜索”,则不需要输入字段中的文本,因为它显然是搜索输入。在此文件夹中没有搜索按钮或标签,因此,如果输入中没有文本,您将不知道其用途。
根据您的情况,有3个框可显示3个搜索条件。因此,您不应在所有内容上都添加“搜索”,而应添加搜索条件描述。这只是为了节省标签所需要的空间。如果使用标签,则不需要输入中的文本。
最后,如果在后端收到输入值作为描述文本,则忽略它。
真正的答案是使用像jQuery这样的javascript框架,在该框架中,绑定此内容比内联事件的重复性要小得多。
否则,您将以确实执行您描述的形式添加onsubmit处理程序。
或者,如果本地化不是问题,则不要使用“真实文本”。您使用看起来像文本的背景图像。然后,您可以拥有CSS
onfocus="if (this.value=='<%= SearchText %>') this.value = ''" value="<%= SearchText %>"
(我在猜测语法)
那么您可以拥有
<style>
.watermark {
background-image: url(xxxxx.png)
}
.nowatermark {
}
</style>
不确定它是否矫kill过正,但我最终使用了telerik rad文本框。
<input type="text" name="search" class="watermark" onfocus="this.className='nowatermark'" onblur="if (this.value=='') this.className='watermark'" value="">
而且效果很好。
称为占位符或水印
在HTML5中非常简单,您只需要编写placeholder =“ your placeholder” <telerik:RadTextBox ID="txtPublishedPapers" runat="server" EmptyMessage="Enter name of Published Papers/Journal here">
</telerik:RadTextBox>
否则,在JavaScript中,您可以执行以下操作:http://diveintohtml5.info/forms.html