我想在我的网页上的搜索框显示字“搜索”在灰色斜体。当框接收到焦点时,它看起来就像一个空文本框。如果其中已经有文本,则应该正常显示文本(黑色,非斜体)。这将帮助我避免混乱的标签。
顺便说一句,这是一个页面Ajax搜索,所以它没有按钮。
我想在我的网页上的搜索框显示字“搜索”在灰色斜体。当框接收到焦点时,它看起来就像一个空文本框。如果其中已经有文本,则应该正常显示文本(黑色,非斜体)。这将帮助我避免混乱的标签。
顺便说一句,这是一个页面Ajax搜索,所以它没有按钮。
当前回答
简单的Html 'required'标签是有用的。
<form>
<input type="text" name="test" id="test" required>
<input type="submit" value="enter">
</form>
它指定在提交表单或按submit按钮之前必须填写输入字段。 这里有一个例子
其他回答
你可以很容易地有一个框读“搜索”,然后当焦点改变到它有文本被删除。就像这样:
< 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">
下面是一个带有谷歌Ajax库缓存和一些jQuery魔法的函数示例。
这将是CSS:
<style type="text/stylesheet" media="screen">
.inputblank { color:gray; } /* Class to use for blank input */
</style>
这将是JavaScript代码:
<script language="javascript"
type="text/javascript"
src="http://www.google.com/jsapi">
</script>
<script>
// Load jQuery
google.load("jquery", "1");
google.setOnLoadCallback(function() {
$("#search_form")
.submit(function() {
alert("Submitted. Value= " + $("input:first").val());
return false;
});
$("#keywords")
.focus(function() {
if ($(this).val() == 'Search') {
$(this)
.removeClass('inputblank')
.val('');
}
})
.blur(function() {
if ($(this).val() == '') {
$(this)
.addClass('inputblank')
.val('Search');
}
});
});
</script>
这就是HTML:
<form id="search_form">
<fieldset>
<legend>Search the site</legend>
<label for="keywords">Keywords:</label>
<input id="keywords" type="text" class="inputblank" value="Search"/>
</fieldset>
</form>
我希望这足以使您对GAJAXLibs和jQuery产生兴趣。
使用jQuery Form Notifier -它是最流行的jQuery插件之一,并且不会遭受其他jQuery建议的错误(例如,你可以自由地设置水印样式,而不用担心它会被保存到数据库中)。
jQuery水印直接在表单元素上使用单一的CSS样式(我注意到应用于水印的CSS字体大小属性也会影响文本框——这不是我想要的)。加上jQuery水印是你可以拖拽文本到字段(jQuery表单通知不允许这一点)。
另一个由其他人建议(在digitalbrush.com),会意外地提交水印值到您的表单,所以我强烈建议反对它。
来自http://asp.net的AJAXToolkit用户
使用背景图像来渲染文本:
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");
}
});
});