我想在我的网页上的搜索框显示字“搜索”在灰色斜体。当框接收到焦点时,它看起来就像一个空文本框。如果其中已经有文本,则应该正常显示文本(黑色,非斜体)。这将帮助我避免混乱的标签。
顺便说一句,这是一个页面Ajax搜索,所以它没有按钮。
我想在我的网页上的搜索框显示字“搜索”在灰色斜体。当框接收到焦点时,它看起来就像一个空文本框。如果其中已经有文本,则应该正常显示文本(黑色,非斜体)。这将帮助我避免混乱的标签。
顺便说一句,这是一个页面Ajax搜索,所以它没有按钮。
当前回答
这叫做“水印”。
我找到了jQuery插件jQuery水印,不像第一个答案,它不需要额外的设置(原始答案也需要在表单提交之前进行特殊调用)。
其他回答
前段时间我在我的网站上发布了一个解决方案。要使用它,请导入一个.js文件:
<script type="text/javascript" src="/hint-textbox.js"></script>
然后用CSS类hintTextbox注释任何你想要有提示的输入:
<input type="text" name="email" value="enter email" class="hintTextbox" />
更多的信息和例子可以在这里找到。
这叫做“水印”。
我找到了jQuery插件jQuery水印,不像第一个答案,它不需要额外的设置(原始答案也需要在表单提交之前进行特殊调用)。
这就是所谓的文本框水印,它是通过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
你想要这样分配给onfocus:
if (this.value == this.defaultValue)
this.value = ''
this.className = ''
这是onblur:
if (this.value == '')
this.value = this.defaultValue
this.className = 'placeholder'
(如果你愿意,你可以使用一些更聪明的东西,比如框架函数,来进行类名切换。)
用一些CSS像这样:
input.placeholder{
color: gray;
font-style: italic;
}
你可以添加和删除一个特殊的CSS类,用JavaScript修改输入值onfocus/onblur:
<input type="text" class="hint" value="Search..."
onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">
然后在CSS中指定一个样式提示类,例如:
input.hint {
color: grey;
}