在引導CSS中的頂欄輸入問題ie即

Question

當我使用引導CSS在頂欄中創建一個輸入框時，佔位符值在除IE以外的所有瀏覽器中都可見。但在Twitter網站，他們讓它看起來不知何故（不是JavaScript，因爲我關掉了腳本並進行了測試）。任何人都可以幫助我嗎？

Answer 1

很高興看到您的代碼，但我會假設您在輸入標記上設置了佔位符=「我的佔位符」屬性。這是新的HTML5功能，所以這就是爲什麼它沒有JavaScript的工作。

有幾個原因讓我想到它爲什麼不起作用。

1. 將您的文檔類型正確設置爲html，它表示html5。
2. 請確保doctype聲明之前沒有任何內容，甚至沒有空行。
3. 正確設置您的CSS樣式。你必須使用供應商前綴 因爲它是一個相對較新的功能：

---

::-webkit-input-placeholder { color:#999; }; 
:-moz-placeholder { color:#999; }; 
:-ms-input-placeholder { color:#999; }; 
:placeholder { color:#999; }; 
.placeholder { color:#999; }; 

Answer 2

我遇到類似問題，做這個僞造的IE瀏覽器相同的佔位符的功能。

<script type="text/javascript"> 
$(function() { 
    if(!$.support.placeholder) { 
     var active = document.activeElement; 
     $(':text').focus(function() { 
      if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) { 
       $(this).val('').removeClass('hasPlaceholder'); 
      } 
     }).blur(function() { 
      if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) { 
       $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder'); 
      } 
     }); 
     $(':text').blur(); 
     $(active).focus(); 
     $('form').submit(function() { 
      $(this).find('.hasPlaceholder').each(function() { $(this).val(''); }); 
     }); 
    } 
}); 
</script> 

來源：http://www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/