我如何实现类似于堆栈溢出快速搜索的“帮助文本”?

问题描述 投票:2回答:7

这将是一个总的新手问题,但是我真的不能做一个谷歌搜索引擎,因为我不确定它叫什么。

您知道StackOverFlow右上角的快速搜索栏吗?

您知道如何在其中编写“搜索”,单击它时,它变成空白,什么是实现此目的的最佳方法?

我看到javascript在stackoverflow中具有此功能。

onfocus="if (this.value=='search') this.value = ''" value="search"

但是如果我有一个单独的搜索按钮,并且用户没有关注该搜索条件(它有多个搜索条件),则需要考虑“搜索”。

我需要做类似的事情

if(textbox1.Text == "search")
{
    textbox1.Text = "";
}

不得不将文本(“搜索”)放在3个地方似乎有点烦人。标记两次,后面的代码一次。

还有另一种方法吗?

javascript textbox
7个回答
0
投票

您要查找的术语是“占位符”。除了手动操作外,随着时间的流逝,HTML5 placeholder attribute得到更多浏览器的支持。


0
投票

看起来像SO搜索一样,如果文本是搜索,onFocus会清除文本。您可以通过在该框中键入搜索来证明这一点,单击某处,然后在文本框中单击返回,然后将其删除。使用“测试”执行相同的操作,并且不会将其删除。

如果最终要手动实现,请确保在多个位置使用常量而不是使用“搜索”。使用常量不太容易出错,因为您不会键入错误,并且如果更改了要更改的内容,则只需在一个地方进行更改。


0
投票

是的,还有其他方法,但是所有这些方法都需要输入3次以上的内容,而不仅仅是“搜索”。

例如,您可以像这样在类中放置一个常量字符串:

placeholder

然后,在您的课堂上,您会说出这样的话:

const string SearchText = "search";

然后在aspx页面中,您会说:

if(textbox1.Text == SearchText)
{
   textbox1.Text = "";   
}

现在,只写“搜索”一词三遍似乎不那么简单吗?


0
投票

如果您在按钮上写有“搜索”,则不需要输入字段中的文本,因为它显然是搜索输入。在此文件夹中没有搜索按钮或标签,因此,如果输入中没有文本,您将不知道其用途。

根据您的情况,有3个框可显示3个搜索条件。因此,您不应在所有内容上都添加“搜索”,而应添加搜索条件描述。这只是为了节省标签所需要的空间。如果使用标签,则不需要输入中的文本。

最后,如果在后端收到输入值作为描述文本,则忽略它。


0
投票

真正的答案是使用像jQuery这样的javascript框架,在该框架中,绑定此内容比内联事件的重复性要小得多。

否则,您将以确实执行您描述的形式添加onsubmit处理程序。

或者,如果本地化不是问题,则不要使用“真实文本”。您使用看起来像文本的背景图像。然后,您可以拥有CSS

onfocus="if (this.value=='<%= SearchText %>') this.value = ''" value="<%= SearchText %>"

(我在猜测语法)

那么您可以拥有

<style>
.watermark {
    background-image: url(xxxxx.png)
}

.nowatermark {

}
</style>

0
投票

不确定它是否矫kill过正,但我​​最终使用了telerik rad文本框。

<input type="text" name="search" class="watermark" onfocus="this.className='nowatermark'" onblur="if (this.value=='') this.className='watermark'" value="">

而且效果很好。


0
投票

称为占位符或水印

在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

© www.soinside.com 2019 - 2024. All rights reserved.