Question

我有一个输入字段说输入你的名字，我想添加CSS设置，当我点击字段“输入你的名字”消失。

当我点击它时，如果我没有输入任何东西“输入你的名字”回来了。

这个问题的解决方案是什么？它只是CSS吗？还是JavaScript？

Answer 1

如果您在网页中使用html5 doctype，这很容易

<input type="text" name="first_name" placeholder="Enter your name">

使用placeholder属性，任何现代浏览器都会完成其余的工作。

如果浏览器不支持placeholder属性，则需要使用javascript。

Answer 2

您是否查看了HTML5 placeholder attribute？

Answer 3

试试这个：

<input name="textfield1" type="text" class="login_te" value="enter you name" onblur="if(this.value=='')this.value='enter you name';" onfocus="if(this.value=='enter you name')this.value='';" />

Answer 4

只需使用此

即可

<input type="text" value="Enter Your Name" onfocus="if (this.value == 'Enter Your Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Your Name';}">

希望得到帮助

Answer 5

你必须使用javascript：

<input type="text" value="Click..." onfocus="if(this.value == 'Click...')this.value='';" onblur="if(this.value == '')this.value='Click...';" />

Answer 6

如果我理解了你的问题，你想要隐藏整个输入框。你必须结合使用jss。

document.getElementById("id").style.display = "none";

将隐藏包含输入字段的div

document.getElementById("id").style.display = "block";

将再次显示您的div。您所要做的就是将这两个snipplet复制到您喜欢的javascript事件中。

Answer 7

通常，这是使用JavaScript完成的，但是如果您反对使用JavaScript，则可以使用“输入您的名字”的背景图片，并在该字段聚焦时消失。

input#namefield {
    background: url(enter_your_name.png);
}

input#namefield:focus {
    background-image: none;
}

Answer 8

这不是CSS的事情

您可以简单地使用：

<input type="text" value="Enter Your Name" onfocus="if (this.value == 'Enter Your Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Your Name';}">

如果您正在设计支持HTML5的现代浏览器，您可以使用以下内容：

<input type="text" placeholder="Enter Your Name" />

这样当他们的场被聚焦时，文本就会消失

现在，要使其适用于较旧的浏览器，您可以使用this jQuery plugin called HTML5 Forms。它还在旧浏览器上添加了许多HTML5表单的支持。

Answer 9

使用placeholder attribute。

不幸的是，每个浏览器都不支持它。

因此，您必须使用JavaScript回退才能使其在这些浏览器中运行。我推荐这个：

https://github.com/mathiasbynens/Placeholder-jQuery-Plugin

在支持placeholder的浏览器（例如Chrome）中查看演示，然后在不支持IE9的浏览器中查看：

http://mathiasbynens.be/demo/placeholder

这个输入字段的css是什么？

9 个答案: