对于输入框提示文本(例如覆盖在搜索框上的“搜索”)，推荐的策略是什么？

Question

许多页面都有搜索框，搜索框通常会有覆盖的文本“搜索”，当用户聚焦元素时，搜索框消失，当焦点丢失时，搜索框重新出现。我很想知道人们推荐什么是最好的策略。

我采用的策略是使用input元素的焦点/模糊事件，并测试内容以确定值是否应该更改。在下面的示例中，我使用了jQuery。举个例子，我们有一个id为quick-search的输入元素，如果是空的，我会显示文本"Search“，当被聚焦时，我会删除文本并更新样式。

$(function() {
  $("#quick-search").focus(function() {
    if (this.value === "Search") {
      $(this).removeClass("quick-search-not-focussed");
      this.value = "";
    }
  }).blur(function() {
    if (this.value === "") {
      $(this).addClass("quick-search-not-focussed");
      this.value = "Search";
    }
  });
})

我的quick-search-not-focussed类如下所示：

.quick-search-not-focussed { color: #bbb; }

这对我来说很有效，因为搜索框只能在enter上提交，因为没有按钮，但是一些场景需要更多的输入元素与输入文本覆盖，你使用过的替代技巧/技术是什么？就我个人而言，我不喜欢在这种方法中使用图像。

Answer 1

jQuery placeholder

实际上，有quite a few similar plugins。我链接的那个对我来说已经足够好了。

Answer 2

看看这个：http://fuelyourcoding.com/scripts/infield/

它与这里的其他版本的不同之处在于它更容易使用。标签在字段焦点上淡出，只有在您开始键入时才会消失。

和它的不起眼的。

Answer 3

我在我的代码中使用了以下代码。

<input id="searchBox" 
       class="search-gray" 
       name="q" tabindex="1" 
       onblur=" if (this.value==''){this.value = 'search...'; this.className = 'search-gray'}" 
       onfocus=" this.className = ''; if (this.value=='search...') {this.value = ''}" 
       type="text" 
       value="search...">

<style>
    .search-gray{color:#c5c5c5;}
</style>

编辑

以下是StackOverflow在搜索框中使用的内容

 <input name="q" 
       class="textbox" 
       tabindex="1" 
       onfocus="if (this.value=='search') this.value = ''" 
       type="text" 
       maxlength="80" 
       size="28" 
       value="search">