佔位符在Chrome中不會消失

我已經根據下面的代碼創建了一個輸入。佔位符在Chrome中不會消失

<div> 
    <form id="me" runat="server"> 
    <input id="stuff" type="text" placeholder="Type here" runat="server" /> 
    </form> 
</div>

正如所料，當我開始輸入時，佔位符文本消失。這在Burning Cat瀏覽器中應該可以使用，但不能在Shiny Metal瀏覽器中使用。是什麼導致它（樣式，服務器標籤，其他東西...）？可以做些什麼呢？

來源

2012-08-04 Konrad Viltersten

Firefox和Chrome（和safari）在HTML5佔位符上的行爲不同。如果您希望Chrome消失焦點佔位符，你可以使用下面的腳本：

$('input:text, textarea').each(function(){ 
    var $this = $(this); 
    $this.data('placeholder', $this.attr('placeholder')) 
     .focus(function(){$this.removeAttr('placeholder');}) 
     .blur(function(){$this.attr('placeholder', $this.data('placeholder'));}); 
});

來源

2012-08-09 23:55:52

我想將此認定行爲的錯誤。我的意思是，如果我需要添加一些JS來使佔位符消失，它就被稱爲解決方法。還是有一個合理的原因，爲什麼它的行爲？ – 2012-08-11 08:15:08

我真的很喜歡Chrome做佔位符的方式。它允許您使用佔位符文本作爲表單字段標籤，即使您的頁面加載的焦點集中在其中一個字段上。 – xamde 2012-09-11 20:46:31

選擇器應該是'$（'[placeholder]'）'，因爲有許多輸入類型不是文本或textarea（電子郵件等），並且可以有佔位符。另外，新的jQuery不喜歡（不幸）''text'選擇器。 – Rudy 2013-02-04 13:08:23

您可以使用此佔位符jQuery插件：placeholderFix。使用此插件，佔位符標記在所有瀏覽器中都能以相同的方式工作，而且在不支持它的瀏覽器中也是如此。

來源

2012-08-18 07:23:44 user1392191

我碰到同樣的問題，今天來了，我想出了一個純CSS ~~解決方案~~黑客：

input:focus::-webkit-input-placeholder { 
    color: transparent; 
}

來源

2013-01-25 15:17:06

+1的創意，但我需要指出的是 - 雖然我**真的很喜歡**的方法 - 這不是一個解決方案。這是一個解決方法。我仍然聲稱這是一個鉻的錯誤。 :) – 2013-01-25 16:39:33

此外，你錯過了語言標籤的語法。它應該是* lang-css *裏面，最後是兩個破折號「* - *」。我糾正了這個sytax，現在你的答案看起來更好了！ – 2013-01-25 16:41:24

我完全同意。我考慮用* hack *這個詞代替* solution *，但由於某種原因與後者一起使用。我現在編輯了這篇文章以反映這一點。我嘗試了語法標記的不同變體，但似乎沒有任何工作。現在我認爲它可能有效，但我沒有注意到，因爲顏色都很暗。謝謝您的幫助。 – 2013-01-25 18:29:37

佔位符在Chrome中不會消失

回答

相關問題