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

EXAMPLE

Answer 2

它们被称为输入水印。你可以找到很多jquery插件来做到这一点。这是one of them
您可以使用css

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

2 个答案: