css - HTML/CSS 输入/文本区域、默认文本和颜色

Question

两个半相关的问题:

1) 我见过<input>和 <textarea>包含一些默认文本的框，例如“在此处输入搜索词”，当您单击该框时，文本就会消失。这是如何实现的？这是 Javascript 的东西吗？

2) 默认文本可以是一种颜色，而无论您键入什么(覆盖或追加)，都可以是不同的颜色吗？

Answer 1

不确定为什么上面的标记为已回答，因为它实际上并没有回答问题。希望这样做:

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

让我们分解一下:

value="输入您的全名"

这会在您的输入中添加一个默认的文本字符串。

<textarea>Enter your comment</textarea>

同样可以通过在标签之间输入文本来实现文本区域。

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

当输入失去焦点时，我们检查当前输入文本是否为空白。如果是，我们改回默认文本字符串并将颜色改回其原始状态。

HTML5

<input type="text" name="name" placeholder="Enter your full name">
<textarea placeholder="Enter your comment"></textarea>

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 */

EXAMPLE