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

Question

我遇到了一个问题，但我不确定是否是我做错了什么，或者是否尚不支持此功能。

基本上我有以下几行代码：

<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" 是否支持占位符文本？

干杯 缺口

Answer 1

iPad 正在做正确的事情。 占位符属性date 类型的 input 元素不支持。它可能适用于桌面版 Safari，因为它不支持 date 类型，因此该属性被忽略，您只剩下一个纯文本字段。您可以检查 DOM 检查器。

Answer 2

这里有一点小技巧...

最初将该字段设置为文本字段。当用户聚焦于该字段时，将字段类型切换为日期并重新聚焦。

在ios6中测试

HTML

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

JS

<script>

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

</script>

Answer 3

iOS Safari 的 CSS：

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

然后在日期输入上使用占位符：

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

Answer 4

使用 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';"/>

Answer 5

将其添加到标题中

<script type="text/javascript">
    var datefield = document.createElement("input")
    datefield.setAttribute("type", "date")
    if (datefield.type != "date") { //if browser doesn't support input type="date", load files for jQuery UI Date Picker
        document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
    }
    if (datefield.type != "date") { //if browser doesn't support input type="date", initialize date picker widget:
        jQuery(function($) { //on document.ready
            $('input[type="date"]').datepicker();
            $('input[type="date"]').attr('placeholder', 'dd.mm.rrrr');
        });
    }
</script>