顯示和隱藏文本框中的跨度/標籤文本

我試圖實現一個簡單的技巧，當用戶開始在各自的文本框中輸入文本時，會隱藏文本框內的跨度/標籤，並顯示它，如果文本框爲空模糊。顯示和隱藏文本框中的跨度/標籤文本

（它在形式用戶登錄實現）到目前爲止，這件事情是工作很好，而且這裏是demo

但它在以下情況下會失敗：

1）如果用戶輸入用戶名，前面輸入用戶名列表（關閉自動完成時由瀏覽器存儲的表單數據）。如果用戶用鼠標從列表中單擊選擇用戶名，密碼字段會自動填充。現在雖然密碼字段有它的價值，它不會隱藏跨度。（KEYDOWN /對焦/點擊/改變了文本事件在這種情況下沒有幫助）

a busy cat

2）當用戶名/密碼錯誤，重新加載頁面，用戶名文本框中有最後輸入的值。但仍然顯示它的跨度。（我試過檢查用戶名文本框是在頁面加載空的。它沒有工作）

a busy cat

誰能幫我解決這些事情？

在此先感謝... :)

2011-07-08 Bongs

我無法複製其中的任何內容，也沒有任何用戶名列表的提示。 –

您可能無法在我提供的演示中看到它。如果自動完成功能被關閉，該列表實際上是由瀏覽器存儲的表單數據。（我會編輯這個問題） – Bongs

你需要什麼，我是個placholder。佔位符已被html5 標準化，可以通過各種jquery插件（這裏是one）輕鬆實現。

我建議你使用這些解決方案，因爲它們是標準。理想的解決方案是使用html5，而不是對舊版瀏覽器使用javascript。

當您插入在輸入欄中輸入字母，文字消失。這是在該插件的幫助下完成的。

2011-07-08 08:43:30

@Nicola ...我會試試它... – Bongs

佔位符在我的情況下完美。感謝：D – Bongs

看來你正試圖在這裏重新發明輪子。檢查似乎是同一主題這個已經回答的問題： how do I make an html text box show a hint when empty

2011-07-08 08:46:12

大聲笑... @Adam的答案是否...如果你檢查問題，我把鏈接演示，我已經實施的東西。但在這種情況下，它在給定2個案例中失敗。我想修復它。 – Bongs

你說你的問題的方式不會使它聽起來好像它不同於我的答案中引用的一般輸入水印。你試圖做什麼不同？我預計使用已經罐裝的解決方案會讓你受益，所以你不必在多個瀏覽器/版本上處理測試（當你自己動手時，這總是很痛苦）。 –

@亞當..我要把截圖，這可能會給你一些想法。 – Bongs

可用性的角度來看，我不認爲這將是可怕的隱藏的兩個輸入水印無論哪個上被點擊/ keydowned等。現在這一個選項是有爭議的，所以你已經被警告...

<input name="first_name" type="text" autocomplete="off">

只是想確保你意識到這一點 - 最常用的防止信用卡領域，從自動填充。希望在這裏有所幫助。

2011-07-08 08:48:58

爲了方便用戶，自動填充在用戶名字段上爲ON。我將在一段時間添加屏幕截圖... – Bongs

回答