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正在做正确的事情。 placeholder属性isn't supported on input elements on type date。它可能在桌面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

使用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 4

iOS Safari的CSS：

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

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

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

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>

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

5 个答案: