讓一個非HTML5輸入有一個「佔位符」

我有幾個<input>元素，我需要HTML5的佔位符。只有當輸入沒有文字時，纔會在焦點上消失並在模糊中重新出現。我已經看到了一些JavaScript重載的實現，我一直在尋找一個輕量級的（最好是純CSS）解決方案。讓一個非HTML5輸入有一個「佔位符」

這裏的HTML：

<div class="email-container"> 
    <span class="default-value">Email</span> 
    <input class="text-input" name="login" type="email"/> 
</div> 
<div class="pw-container"> 
    <span class="default-value">Password</span> 
    <input class="text-input" name="login" type="pw"/> 
</div>

來源

2012-11-29 Nick G.

您可能感興趣的：http://caniuse.com/#feat=input-placeholder – valentinas

對於那些有興趣的人，他想回答他自己的問題。但是，是的，我第二，已經有足夠的polyfills（包括SO本身） – Alexander

我無法找到任何東西，完全適合我的賬單（如在「CSS-只有」），但我還是來了一對夫婦使用jQuery良好的解決方案：

我將輸入的背景設置爲透明，將'佔位符'文本的z-index設置爲-1。這使我可以點擊文本上的「開啓」，並實際上點擊輸入。見this jsFiddle。
我允許'佔位符'文本位於輸入上，但我使用文本上的點擊處理程序將焦點轉移到輸入。請參閱this jsFiddle。

在這兩種情況下，實施的主力是這樣的jQuery代碼：

$('.text-input').each(function(){ 
    var input = $(this); 
    //Initially hide the default value if the input is non-empty 
    input.siblings('.default-value').toggle(!input.val()); 
    input.on("focus blur", function(){ 
     if(input.val().length === 0){ 
      input.siblings('.default-value').toggle(); 
     } 
    } 
)});

另一個重要的一塊拼圖是搞清楚如何使用position: absolute和position: relative使「佔位」文本很好地坐在輸入內，同時仍允許輸入自由移動。

來源

2012-11-29 22:28:38

如果你對JavaScript解決方案感興趣，你可能想看看像[Placeholder.js]（https：// github.com/jamesallardice/Placeholders.js）腳本，它可以更準確地模擬原生的「佔位符」行爲。它將允許您使用實際的「佔位符」屬性作爲開始。 –

常用的方法是給輸入一個'data-default-value'（或其他這樣的屬性，並在空字符串之間切換它的值（當它的值是默認值時），反之亦然。 – Shmiddty

的近代化項目具有跨瀏覽器的優秀上市HTML5 polyfills這裏：https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

如果你去到那個頁面，向下滾動到「Web窗體：輸入佔位符」，你會看到一些優秀的項目這將做你正在尋找的東西。

來源

2012-11-29 22:34:01 Mark

讓一個非HTML5輸入有一個「佔位符」

回答

相關問題