我想在我的网页上的搜索框显示字“搜索”在灰色斜体。当框接收到焦点时,它看起来就像一个空文本框。如果其中已经有文本,则应该正常显示文本(黑色,非斜体)。这将帮助我避免混乱的标签。

顺便说一句,这是一个页面Ajax搜索,所以它没有按钮。


当前回答

当页面第一次加载时,让搜索出现在文本框中,如果你想要它是灰色的。

当输入框接收到焦点时,选择搜索框中的所有文本,这样用户就可以开始输入,这会在此过程中删除所选文本。如果用户想要第二次使用搜索框,这也会很好地工作,因为他们不需要手动突出显示之前的文本来删除它。

<input type="text" value="Search" onfocus="this.select();" />

其他回答

当页面第一次加载时,让搜索出现在文本框中,如果你想要它是灰色的。

当输入框接收到焦点时,选择搜索框中的所有文本,这样用户就可以开始输入,这会在此过程中删除所选文本。如果用户想要第二次使用搜索框,这也会很好地工作,因为他们不需要手动突出显示之前的文本来删除它。

<input type="text" value="Search" onfocus="this.select();" />
$('input[value="text"]').focus(function(){ 
if ($(this).attr('class')=='hint') 
{ 
   $(this).removeClass('hint'); 
   $(this).val(''); 
}
});

$('input[value="text"]').blur(function(){
  if($(this).val() == '')
  {
    $(this).addClass('hint');
    $(this).val($(this).attr('title'));
  } 
});

<input type="text" value="" title="Default Watermark Text">

你可以很容易地有一个框读“搜索”,然后当焦点改变到它有文本被删除。就像这样:

< onfocus =“这个输入。价值=“类型”=“文本”=“搜索”/>

当然,如果你这样做,用户自己的文本将消失时,他们点击。所以你可能想要使用更健壮的东西:

<input name="keyword_" type="text" size="25"  style="color:#999;" maxlength="128" id="keyword_"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#999';"
onfocus="this.value=''; this.style.color = '#000';"
value="Search Term">

简单的Html 'required'标签是有用的。

<form>
<input type="text" name="test" id="test" required>
<input type="submit" value="enter">
</form>

它指定在提交表单或按submit按钮之前必须填写输入字段。 这里有一个例子

使用背景图像来渲染文本:

 input.foo { }
 input.fooempty { background-image: url("blah.png"); }

然后你所要做的就是检测value == 0并应用正确的类:

 <input class="foo fooempty" value="" type="text" name="bar" />

jQuery JavaScript代码如下所示:

jQuery(function($)
{
    var target = $("input.foo");
    target.bind("change", function()
    {
        if( target.val().length > 1 )
        {
            target.addClass("fooempty");
        }
        else
        {
            target.removeClass("fooempty");
        }
    });
});