Safari中的HTML5日期字段和佔位符文本

我遇到了一個問題，但我不確定這是我做錯了什麼，或者此功能是否還不受支持。Safari中的HTML5日期字段和佔位符文本

基本上我有下面的代碼行：

<input type="text" name="lastname" id="lastname" value="" placeholder="Last name" /> 

<input type="date" name="dob" id="dob" value="" placeholder="Date of birth" />

我的Safari瀏覽器和桌面版的所有好測試這一點，但是當我測試它在iPad，第二輸入不顯示佔位符文本。有誰知道iPad上的type =「date」是否支持佔位符文本？

乾杯尼克

來源

2011-12-08 Sniffer

在iPad上做正確的事情。 placeholder屬性isn't supported on input elements on type date。它可能在桌面Safari上工作，因爲它不支持date類型，因此該屬性將被忽略，並且只剩下純文本字段。您可以檢查DOM檢查器。

來源

2011-12-08 15:49:20 robertc

乾杯。感謝您的鏈接到一個很好的資源呢！爲以後使用提供書籤。必須說這讓你感到有點奇怪，你可以在一些文本字段上使用佔位符文本，而不是其他文本字段。如果我想添加格式作爲佔位符例如 - 'dd/mm/yy'？ – Sniffer

但這就是關鍵，日期輸入不應該是一個文本字段。 – robertc

語義。這是一個輸入字段，在iPad上而不是調出正常的鍵盤焦點會帶來日期選擇器。 – Sniffer

這裏有點瑕疵去...

最初有字段作爲文本字段。當用戶專注於字段切換時，字段輸入日期並重新聚焦。

在iOS6的

HTML測試

<input type="text" placeholder="DOB" id="dob" />

<script> 

    var textbox = document.getElementById('dob') 
     textbox.onfocus = function (event) { 
      this.type = 'date'; 
      this.focus(); 
    } 

</script>

來源

2014-02-11 15:41:29 sidarcy

使用sidarcy的溶液：

<input type="date" name="dob" id="dob" value="" 
    placeholder="Date of birth" 
    onfocus="this.type='date';this.focus();" 
    onblur="if(this.value == '') this.type='text';"/>

來源

2015-04-20 17:16:54 MarianaAFSilva

CSS適用於iOS的Safari：

input[type='date']:after { 
    color: #aaa; 
    content: attr(placeholder); 
}

然後在輸入的日期使用佔位符：

<input name="mydate" type="date" value="" placeholder="Select a date" />

來源

2016-08-19 02:37:59 Rockallite

雖然這確實起作用，但是在選擇一個值之後，佔位符仍然保持不變（至少對於'時間'類型來說） – sMyles

Safari中的HTML5日期字段和佔位符文本

回答

相關問題