我想在我的网页上的搜索框显示字“搜索”在灰色斜体。当框接收到焦点时,它看起来就像一个空文本框。如果其中已经有文本,则应该正常显示文本(黑色,非斜体)。这将帮助我避免混乱的标签。
顺便说一句,这是一个页面Ajax搜索,所以它没有按钮。
我想在我的网页上的搜索框显示字“搜索”在灰色斜体。当框接收到焦点时,它看起来就像一个空文本框。如果其中已经有文本,则应该正常显示文本(黑色,非斜体)。这将帮助我避免混乱的标签。
顺便说一句,这是一个页面Ajax搜索,所以它没有按钮。
当前回答
这就是所谓的文本框水印,它是通过JavaScript完成的。
http://naspinski.net/post/Text-Input-Watermarks-using-Javascript- (IE-Compatible) . aspx
或者如果你使用jQuery,一个更好的方法:
http://digitalbush.com/projects/watermark-input-plugin/ 或code.google.com/p/jquery-watermark
其他回答
我使用了一个简单的,一行javascript解决方案,它的工作很棒。这里有一个文本框和文本区域的例子:
<textarea onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">Text</textarea>
<input type="text" value="Text" onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">
唯一的“缺点”是在对字段值做任何事情之前在$_POST或Javascript验证中进行验证。意思是,检查字段的值是不是“Text”。
另一种选择,如果你想让这个特性只适用于较新的浏览器,可以使用HTML 5的占位符属性提供的支持:
<input name="email" placeholder="Email Address">
在没有任何样式的情况下,在Chrome中看起来是这样的:
你可以在这里和HTML5的CSS占位符样式中尝试演示。
一定要检查该特性的浏览器兼容性。Firefox的支持是在3.7中添加的。Chrome浏览器没问题。Internet Explorer只在10中添加了支持。如果你的目标浏览器不支持输入占位符,你可以使用jQuery插件jQuery HTML5占位符,然后添加以下JavaScript代码来启用它。
$('input[placeholder], textarea[placeholder]').placeholder();
使用jQuery Form Notifier -它是最流行的jQuery插件之一,并且不会遭受其他jQuery建议的错误(例如,你可以自由地设置水印样式,而不用担心它会被保存到数据库中)。
jQuery水印直接在表单元素上使用单一的CSS样式(我注意到应用于水印的CSS字体大小属性也会影响文本框——这不是我想要的)。加上jQuery水印是你可以拖拽文本到字段(jQuery表单通知不允许这一点)。
另一个由其他人建议(在digitalbrush.com),会意外地提交水印值到您的表单,所以我强烈建议反对它。
现在变得很简单了。 在html中,我们可以为输入元素提供占位符属性。
e.g.
<input type="text" name="fst_name" placeholder="First Name"/>
查看更多详细信息:http://www.w3schools.com/tags/att_input_placeholder.asp
简单的Html 'required'标签是有用的。
<form>
<input type="text" name="test" id="test" required>
<input type="submit" value="enter">
</form>
它指定在提交表单或按submit按钮之前必须填写输入字段。 这里有一个例子