HTML5 日期类型缺失占位符 hack

Question

Placeholder="date" 可以在 type="date" 输入中使用，所以我找到了这个片段

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date">

但在我的 android 手机中，您必须点击两次才能触发该字段。我应该使用另一个片段来显示日期类型字段的占位符吗？

Answer 1

隐藏日期输入下的其他元素。 Demo fiddle

HTML:

<div>
    <input class="textbox-n" type="date" id="date" onblur="window.setValue(this.value)" />
    <input class="placeholder" id="placeholder" value="Date" type="text" />
</div>

CSS:

div {
    position: relative;
}
input {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
}
input[type=date], input[type=date]:focus {
    z-index: 1;
    color: transparent;
    background: transparent;
    border: none;
}
input[type=date]:focus {
    z-index: 1;
    color: black;
}
input[type=date]:focus + .placeholder {
    display: none;
}

JavaScript:

window.setValue = function (val) {
    document.querySelector('#placeholder').value = val;
}

HTML5 日期类型缺失占位符 hack

HTML5 date type missing placeholder hack

html

datetime

date