我如何实现"帮助文本"就像stackoverflow快速搜索一样

How do I implement that "help text" thing like the stackoverflow quick search has?

本文关键字：quot 搜索 一样 stackoverflow 文本 何实现 实现 帮助 就像      更新时间：2023-09-26

这将是一个全新的问题但我真的不能做谷歌搜索因为我不知道它叫什么

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

你知道那里写着"search"，当你点击它时，它是空白的，最好的实现方法是什么?

我看到javascript在stackoverflow中有这个。

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

但是如果我有一个单独的搜索按钮，而用户不关注搜索条件(它有多个搜索条件)，我就需要考虑"搜索"。

我需要这样写

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

把文本("search")放在3个地方似乎有点烦人。两次在标记中，一次在后面的代码中。

还有别的方法吗?

您要查找的术语是"占位符"。除了手动操作之外，还有HTML5 placeholder属性，随着时间的推移，越来越多的浏览器支持该属性。

看起来像SO搜索做什么你做的onFocus清除文本，如果文本是搜索。您可以通过在该框中输入search来证明这一点，单击某个位置，然后在文本框中单击返回，它就被删除了。使用"test"做同样的事情，它不会被删除。

如果你最终要手动实现它，确保你使用一个常量，而不是在多个地方使用"search"。使用常量更不容易出错，因为你不会输入错误的类型，如果你改变你想要它说什么，你只需要在一个地方改变它。

是的，还有其他方法可以做到这一点，但所有这些方法都需要输入不止3次"search"。

例如，你可以在你的类中像这样放置一个常量字符串: 
const string SearchText = "search";

然后，在你的课堂上你会这样说:

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

在你的aspx页面，你会说:

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

现在，把"Search"这个词写三遍是不是简单多了?

如果你有一个按钮上面写着"search"，你不需要在输入字段上的文本，因为它显然是一个搜索输入。在软件中，没有搜索按钮或标签，所以如果输入上没有文本，你不知道它是用来做什么的。

在您的示例中，有3个框用于3个搜索条件。所以不要把"搜索"放在所有的页面上，你应该把搜索条件描述放在上面。这只是为了节省标签占用的空间。如果使用标签，则不需要在输入中包含文本。

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

真正的答案是使用像jQuery这样的javascript框架，绑定这些东西比内联事件的东西要少得多。

否则，你所做的就是在表单中添加一个onsubmit处理程序，它确实做了你所描述的。

或者，如果本地化不是问题，你不使用"真实文本"。使用看起来像文本的背景图像。然后输入css

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

(我猜是语法)

那么你可以有

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

不知道这是不是太夸张了，但我最终使用了teleerik rad文本框。

                <telerik:RadTextBox ID="txtPublishedPapers" runat="server" EmptyMessage="Enter name of Published Papers/Journal here">
    </telerik:RadTextBox>

它被称为占位符或水印

在HTML5中很简单，你只需要写placeholder="your placeholder"http://diveintohtml5.info/forms.html

否则在JavaScript中你可以这样做:http://lab.dotjay.co.uk/experiments/forms/input-placeholder-text/

相关文章：