使用保存的密碼使輸入元素內的標籤消失

我已將標籤放在我的輸入字段中，以便在後臺顯示說明文字，並且當用戶在字段中鍵入時，文字消失。我使用的是這裏的例子解釋說：How to create a label inside an <input> element? ，特別在http://attardi.org/使用保存的密碼使輸入元素內的標籤消失

當密碼雖然是由瀏覽器，如谷歌瀏覽器保存的文本作爲此圖像中變成亂碼（這是目前我的本地計算機上）： display and saved password text

保存的密碼的背景文字不會消失。任何幫助將是欣賞 - 謝謝。

來源

2012-10-15 vinsanity38

其稱爲水印 - 谷歌它 - 它不應該與標籤做 –

@ScottSelby爲什麼不呢？而且，看着這個例子，它不是一個標籤，而是一個標籤內的跨度。看起來對我來說完全合法。 –

我想它是有效的，我只是覺得，當你在文本框中鍵入水印與文本時，它更容易控制瀏覽器自動完成， –

您還可以利用新的placeholder屬性。 Read about it here。

不支持IE。選項2將使用Jquery。由於您已在label解決方案中使用Jquery，因此您可以添加代碼，在文檔加載完成後檢查input的value，然後相應地顯示或隱藏label。

該代碼會去的document ready function內：

$(function() { 
    // Handler for .ready() called. 
});

來源

2012-10-15 17:34:29 jmeas

只需使用placeholder屬性 - 它是如此簡單：

<input type="email" placeholder="email" />

從字面上看，就是這樣;瀏覽器會照顧到這種行爲。

是的，它不會在IE中工作（直到IE10被髮布） - 但是你已經有了標籤旁邊的字段，所以它不像IE用戶不能告訴哪個字段是哪個。

來源

2012-10-15 20:06:27 daGUY

我使用在另一個頁面上進行相同的設置，並且我在這些文本框旁邊沒有標籤/說明字段。所以我需要實現這個沒有佔位符的屬性，因爲它在IE中不支持。我真的想保持這些領域沒有旁邊的領域。 – vinsanity38

啊，我只是把我的答案擺脫你的截圖。您可能想嘗試[Replaceholder]（http：// designindevelopment）。com/plugins/replaceholder-jquery-plugin /）插件添加IE支持（它會將佔位符文本「轉換」爲表現相同方式的值）。 – daGUY

我進一步調查，這隻發生在谷歌瀏覽器而不是Mozilla Firefox。我的設置是正確的，看起來可能實際上是Chrome中的一個錯誤。請參閱問題日誌：http://code.google.com/p/chromium/issues/detail?id=117661

當Chrome嘗試執行密碼自動保存過程並且未查看是否存在以前的輸入值時，這看起來也會出現在佔位符屬性中。

感謝所有人的意見。

來源

2012-10-15 23:43:44 vinsanity38

使用保存的密碼使輸入元素內的標籤消失

回答

相關問題