根據事件處理程序更改的標籤

Question

我有一段HTML代碼，它是有兩個輸入的表單的一部分。通過CSS我已經設法使與每個輸入相關聯的標籤位於相應的輸入內，以充當佔位符。

現在，有了一些標準的JS（我不害怕JQuery），我想捕獲用戶在輸入上做的事情（即在一個鼠標單擊或鍵盤按下）上並動態地改變外觀和感覺標籤。

JSFiddle Link

，我需要滿足的條件是：

當輸入的用戶第一次點擊。標籤將顏色更改爲淺灰色。點擊後，如果用戶輸入一個字符，標籤將消失，而您剛剛按下的字符會被顯示。

當用戶第一次點擊輸入。標籤將顏色更改爲淺灰色。點擊後，如果用戶點擊或遠離輸入標籤，標籤會將顏色改回原來的黑色狀態。

在輸入幾個字符後，如果用戶決定通過按退格鍵刪除每個字符直到沒有剩餘字符或用鼠標突出顯示整組字符並按下刪除鍵來刪除整個字符集，標籤出現，但是呈淺灰色。

錯誤1：看起來如果你點擊標籤，它會開始變紅（因爲它應該是），但是當你點擊它時，它會保持紅色而不是變成黑色。但是，如果在輸入上的任何地方點擊，而不是在標籤上，這不是一個錯誤，它應該像它應該那樣工作。

錯誤2：如果您單擊輸入但不是標籤上的標籤，它將變爲紅色，然後如果再次單擊輸入但在標籤上它會短暫變黑，然後再次變紅（它應該保持紅色，因爲我們還沒有離開輸入）

任何幫助你可以提供與JS將是偉大的！

Answer 1

好吧，因爲第一個bug已經解決了。這是第二個錯誤的解決方案。基本上，你只需要添加另一個選擇器到你的一個CSS規則。

只需添加label.label-inside:active的CSS規則label.label-clicked http://jsfiddle.net/8nBAQ/13/

因爲每次你點擊聚焦標籤並切換到label-inside類不到一秒鐘，在:active僞類中那種解僱事件。因此，幾乎可以將類似於label-clicked類的樣式應用於該僞類，並且不會再看到任何閃爍。