HTML/CSS使用灰显的文本制作文本框，当我单击输入信息时，该文本框将消失，如何？
HTML/CSS使用灰显的文本制作文本框，当我单击输入信息时，该文本框将消失，如何？
提问于 2011-01-13 22:19:26
如何创建具有灰色内容的文本框，当我单击它输入文本时，灰色部分将消失并允许我输入所需的文本？
示例：
“名字”文本框。“名字”这几个字在文本框中呈灰色，当我点击时，这些字就消失了，我在里面写上了我的名字。
回答 7
Stack Overflow用户
发布于 2011-01-13 22:22:52
Chrome、火狐、IE10和Safari都支持html5占位符属性
<input type="text" placeholder="First Name:" />
为了获得更多跨浏览器的解决方案，你需要使用一些javascript，有很多预制的解决方案，尽管我不知道有任何解决方案。
Stack Overflow用户
发布于 2011-01-13 22:25:59
使用HTML5，您可以使用以下命令本机完成此操作：<input name="first_name" placeholder="First Name">
但并非所有浏览器都支持此功能(IE)
这可能会起作用：
<input type="first_name" value="First Name" onfocus="this.value==this.defaultValue?this.value='':null">否则，如果您使用的是jQuery，则可以使用.focus和.css更改颜色。
Stack Overflow用户
发布于 2014-08-08 18:32:20
如果您只针对HTML5，则可以使用：
<input type="text" id="firstname" placeholder="First Name:" />对于非HTML5浏览器，我将通过使用jQuery来构建Floern的答案，并使javascript不那么显眼。我也会使用一个类来定义模糊的属性。
$(document).ready(function () {
//Set the initial blur (unless its highlighted by default)
inputBlur($('#Comments'));
$('#Comments').blur(function () {
inputBlur(this);
});
$('#Comments').focus(function () {
inputFocus(this);
});
})功能：
function inputFocus(i) {
if (i.value == i.defaultValue) {
i.value = "";
$(i).removeClass("blurredDefaultText");
}
}
function inputBlur(i) {
if (i.value == "" || i.value == i.defaultValue) {
i.value = i.defaultValue;
$(i).addClass("blurredDefaultText");
}
}CSS：
.blurredDefaultText {
color:#888 !important;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4681036
复制相关文章
相似问题