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日期字段和占位符文本

回答

相关问题