HTML/CSS输入/ textarea,默认文本和颜色

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="Enter your full name"

这会在输入中添加默认的文本字符串.

<textarea>Enter your comment</textarea>

通过在标签之间输入文本,可以通过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 */

例