Ipad 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”是否支持占位符文本吗

干杯

---

尼克

iPad正在做正确的事情。

占位符

属性。它可能在桌面Safari上工作，因为它不支持

date

类型，因此该属性将被忽略，剩下一个纯文本字段。您可以在DOM检查器中进行检查。

这里有一些轻微的黑客攻击

最初将该字段作为文本字段。当用户聚焦于字段开关时，字段类型为“截止日期”并重新聚焦

在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>

var textbox=document.getElementById（'dob'）
textbox.onfocus=函数（事件）{
this.type='date'；
这是focus（）；
}

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

iOS Safari的CSS：

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

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

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

将此添加到标题

<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>

var datefield=document.createElement（“输入”）
datefield.setAttribute（“类型”、“日期”）
如果（datefield.type！=“date”）{//如果浏览器不支持输入type=“date”，则加载jQuery UI日期选择器的文件
document.write（“\n”）
document.write（“\n”）
document.write（“\n”）
}
如果（datefield.type！=“date”）{//如果浏览器不支持输入type=“date”，则初始化日期选择器小部件：
jQuery（函数（$）{//on document.ready
$（'input[type=“date”]”）。datepicker（）；
$（'input[type=“date”]”）attr（'placeholder'，'dd.mm.rrrrrr'）；
});
}

干杯。感谢链接到一个伟大的资源了！已添加书签以供以后使用。必须说，这感觉有点奇怪，您可以在某些文本字段上有占位符文本，但在其他文本字段上没有占位符文本。如果我想添加格式作为占位符，例如-'dd/mm/yy'？但关键是，日期输入不应该是文本字段。语义。这是一个输入字段，在iPad上，它不是显示普通键盘的焦点，而是显示日期选择器的选择。当然，这是语义。这就是为什么要有不同类型的

输入。正确执行的
日期
输入的格式始终为yyyy-mm-dd。您不应该自由键入它，而是应该从控件中选择它。但是如果您使用占位符作为标签（某些移动布局就是这种情况），该怎么办？然后它就成了一件麻烦事。虽然这确实有效，但占位符即使在选择了一个值（至少对
time
types是这样）@sMyles我通过
input[type='date']：empty:after{…