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。

​​

如果輸入接收焦點（即點擊或選項卡上），我們檢查，如果當前輸入文本等於我們默認的文本字符串「中輸入您的全名」。如果是，我們將其設置爲空字符串並更改字體顏色。

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

1. 它們被稱爲輸入水印。你可以找到很多jQuery插件來做到這一點。這是one of them

2. 您可以使用CSS