如何使HTML文本框显示空白时的提示？
Mic*_*rry 203 html javascript html5
我希望我的网页上的搜索框以灰色斜体显示"搜索"一词.当框接收焦点时,它应该看起来像一个空文本框.如果其中已有文本,则应正常显示文本(黑色,非斜体).这将有助于我通过删除标签来避免混乱.
顺便说一句,这是一个页面上的Ajax搜索,所以它没有按钮.
Dre*_*kes 351
如果您很高兴只为新浏览器提供此功能,另一个选择是使用HTML 5的占位符属性提供的支持:
<input name="email" placeholder="Email Address">
在没有任何样式的情况下,在Chrome中看起来像:
您可以在此处和使用CSS的HTML5占位符样式中尝试演示.
请务必检查此功能的浏览器兼容性.3.7中添加了对Firefox的支持.Chrome很好.Internet Explorer仅在10中添加了支持.如果您的目标浏览器不支持输入占位符,则可以使用名为jQuery HTML5 Placeholder的jQuery插件,然后添加以下JavaScript代码以启用它.
$('input[placeholder], textarea[placeholder]').placeholder();
nas*_*ski 91
这被称为文本框水印,它通过JavaScript完成.
或者如果你使用jQuery,一个更好的方法:
- 找到了另一种jQuery方法.这个项目是托管@ http://code.google.com/p/jquery-watermark/ (14认同)
- 第二个链接被打破了.这可能类似:http://digitalbush.com/projects/watermark-input-plugin/ (4认同)
- digitalbrush插件会将'watermark'保存到数据库中.它处于测试阶段,自2007年以来一直没有更新.我建议使用http://code.google.com/p/jquery-watermark/作为@JP建议. (4认同)
- jQuery水印插件很漂亮,因为它不处理输入与预填充值相同的情况.在这种情况下,它会使您的输入文本再次变为灰色! (2认同)
0b1*_*011 40
您可以使用HTML中的属性设置占位符(浏览器支持).该和可以用CSS改变(虽然浏览器的支持是有限的).placeholderfont-stylecolor
input[type=search]::-webkit-input-placeholder { /* Safari, Chrome(, Opera?) */
color:gray;
font-style:italic;
}
input[type=search]:-moz-placeholder { /* Firefox 18- */
color:gray;
font-style:italic;
}
input[type=search]::-moz-placeholder { /* Firefox 19+ */
color:gray;
font-style:italic;
}
input[type=search]:-ms-input-placeholder { /* IE (10+?) */
color:gray;
font-style:italic;
}<input placeholder="Search" type="search" name="q">- 这应该是公认的答案.最初发布于2010年时,可能尚未广泛支持占位符属性,但现在除了IE8之外,所有当前浏览器都支持占位符属性. (2认同)
lev*_*vik 20
您可以添加和删除特殊的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;
}
- 我发布了一个答案,它做了同样的事情,但是以更方便和可维护的方式:http://stackoverflow.com/questions/108207/how-do-i-make-an-html-text-box-show- A-提示,当空/ 2994702#2994702 (2认同)
最好的方法是使用某种JavaScript库(如jQuery或YUI)连接 JavaScript事件,并将代码放在外部.js文件中.
但是如果你想要一个快速而肮脏的解决方案,这就是你的内联HTML解决方案:
<input type="text" id="textbox" value="Search"
onclick="if(this.value=='Search'){this.value=''; this.style.color='#000'}"
onblur="if(this.value==''){this.value='Search'; this.style.color='#555'}" />
更新:添加了所需的着色材料.