Question

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

我采用的策略是使用input元素的focus / blur事件并测试内容以确定是否应该更改该值。在我的以下示例中，我使用jQuery。举个例子，我们有一个id为quick-search的{{1}}的输入元素，当为空时我会在聚焦时显示文本“搜索”我删除文本并更新样式，

$(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; }

这对我来说效果很好，因为搜索框只能在输入时提交，因为没有按钮，但是有些场景需要更多的输入元素和输入文本重叠，你使用的替代技巧/技巧是什么？我个人不喜欢这种方法中使用图像。

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">

Answer 4

我通常会做类似的事情：

<input type="text" name="email" data-original="Email address" value="Email address" />
<input type="text" name="username" data-original="Username" value="Username" />

<script type="text/javascript">
    $(document).ready(function(){
        $('input[data-original]').each(function(){
            var input = $(this);
            var original = input.attr('data-original');

            input.focus(function(){
                if (input.val() == original)
                    input.addClass('focused').val('');
            });
            input.blur(function(){
                if (input.val() == '')
                    input.removeClass('focused').val(original);
            });
        });
    });
</script>

这与您的方法相同，但优点是您不必为每个字段重复代码;相反，您可以在字段中指定data-original，这样就可以了。

Answer 5

FWIW，Webkit浏览器直接支持placeholder标签上的<input>属性：

<input placeholder='enter something' />

输入框提示文本的推荐策略是什么（例如搜索框中覆盖的“搜索”）？

5 个答案: