HTML/CSS制作带有灰色文本的文本框,当我点击输入信息时消失,怎么做？

Question

如何制作一个内容为灰色的文本框,当我点击它以输入文本时,灰色部分会消失并允许我输入所需的文本？

例:

"名字"文本框.单词"First Name"在文本框内部显示为灰色,当我点击时,这些单词消失,我在其中写下我的名字.

Answer 1

Chrome,Firefox,IE10和Safari支持html5占位符属性

<input type="text" placeholder="First Name:" />

为了获得更多的跨浏览器解决方案,你需要使用一些javascript,那里有很多预先制作的解决方案,虽然我不知道任何偏离我的头脑.

http://www.w3schools.com/tags/att_input_placeholder.asp

Answer 2

这个答案说明了HTML5之前的方法.请查看Psytronic使用该placeholder属性的现代解决方案的答案.

HTML:

<input type="text" name="firstname" title="First Name" style="color:#888;" 
    value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />

JavaScript的:

function inputFocus(i) {
    if (i.value == i.defaultValue) { i.value = ""; i.style.color = "#000"; }
}
function inputBlur(i) {
    if (i.value == "") { i.value = i.defaultValue; i.style.color = "#888"; }
}

Answer 3

使用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和.c​​ss来更改颜色.

Answer 4

如果您只定位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;
}

Answer 5

最短的方法是在要更改的输入类型中直接添加以下代码作为附加属性。

onfocus="if(this.value=='Search')this.value=''" 
onblur="if(this.value=='')this.value='Search'"

请注意：将文本“Search”更改为“go”或任何其他文本以满足您的要求。