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

【问题标题】：What will be the css of this input field?这个输入字段的css是什么？
【发布时间】：2011-07-15 11:27:08
【问题描述】：

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

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

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

【问题讨论】：

为此使用 JavaScript。
使用 JavaScript focus 和 blur 事件！

标签： css html

【解决方案1】：

只需使用这个

<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';}">

希望对你有所帮助

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

你看过 HTML5 placeholderattribute吗？

【讨论】：

【解决方案4】：

试试这个：

<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='';" />

【讨论】：

【解决方案5】：

你必须使用javascript：

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

【讨论】：

【解决方案6】：

如果我理解了你的问题，你想隐藏整个输入框。您必须将 javascript 与 css 结合使用。

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

将隐藏包含您的输入字段的 div

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

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

【讨论】：

【解决方案7】：

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

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

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

【讨论】：

【解决方案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 表单的支持。

【讨论】：

【解决方案9】：

使用placeholder attribute。

很遗憾，并非所有浏览器都支持它。

因此，您必须使用 JavaScript 后备来使其在这些浏览器中工作。我推荐这个：

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

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

http://mathiasbynens.be/demo/placeholder

【讨论】：