HTML/CSS 输入/文本区域、默认文本和颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3938590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS input/textarea, default text, and colors
提问by accelerate
Two semi-related questions:
两个半相关的问题：
1) I've seen <input>and <textarea>boxes that contain some default text, like "enter search terms here", and the moment you click on the box, the text disappears. How is this implemented? Is this a Javascript thing?
1）我已经看到<input>，并<textarea>包含一些默认的文本框，如“请在此输入搜索词”，并单击包装盒上的那一刻，文本消失。这是如何实施的？这是一个 Javascript 的东西吗？
2) Can the default text be in one color, and whatever you type (either overwriting, or appending), be in a different color?
2) 默认文本是否可以是一种颜色，而无论您键入什么（覆盖或附加），都可以是不同的颜色吗？
回答by Turnip
Not sure why the above is marked as answered because it doesn't actually answer the question. Hopefully this does:
不知道为什么上面被标记为已回答，因为它实际上并没有回答问题。希望这样做：
HTML4
HTML4
<label for="name">Name</label>
<input type="text" name="name" value="Enter your full name" onfocus="if(this.value=='Enter your full name') {this.value='', this.style.color='#999'};" onblur="if(this.value=='') {this.value='Enter your full name', this.style.color='#555';}" />
Lets break it down:
让我们分解一下：
value="Enter your full name"
value="Enter your full name"
This adds a default string of text in your input.
这会在您的输入中添加一个默认的文本字符串。
<textarea>Enter your comment</textarea>
The same can be achieved with a textarea by entering your text between the tags.
通过在标签之间输入文本，可以使用 textarea 实现相同的目的。
onfocus="if(this.value=='Enter your full name') {this.value='', this.style.color='#999'};"
If the input receives focus (ie. is clicked or tabbed on to) we check if the current input text is equal to our default text string "Enter your full name". If it is we set it to be an empty string and change the font colour.
如果输入获得焦点（即被点击或标签到），我们检查当前输入文本是否等于我们的默认文本字符串“输入您的全名”。如果是，我们将其设置为空字符串并更改字体颜色。
onblur="if(this.value=='') {this.value='Enter your full name', this.style.color='#555';}
When the input looses focus we check if the current input text is blank. If it is we change back to our default text string and change the colour back to it's original state.
当输入失去焦点时，我们检查当前输入文本是否为空白。如果是，我们将更改回我们的默认文本字符串并将颜色更改回它的原始状态。
HTML5
HTML5
<input type="text" name="name" placeholder="Enter your full name">
<textarea placeholder="Enter your comment"></textarea>
HTML5 has a built-in 'placeholder' attribute for doing this which can be styled in the following way:
HTML5 有一个内置的“占位符”属性来执行此操作，可以通过以下方式设置样式：
::-webkit-input-placeholder { color:#555; } /* Webkit */
:-moz-placeholder { color:#555; } /* Firefox <= 18 */
::-moz-placeholder { color:#555; } /* Firefox >= 19 */
:-ms-input-placeholder { color: #555; } /* Internet Explorer */
回答by Lorenzo
They're called input watermark. You can find a lot of jquery plugins for doing that. This is one of them
You can control watermark text using css
它们被称为输入水印。您可以找到很多用于执行此操作的 jquery 插件。这是其中之一
您可以使用 css 控制水印文本
