HTML5 날짜 형식 누락 자리 해킹

Question

자리 표시 자 = "날짜"유형 = "날짜"입력에서 사용할 수있는, 그래서

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

하지만 내 안드로이드 전화에

, 당신은 트리거를 두 번 두드해야이 조각을 발견 필드. 날짜 유형 필드에 자리 표시자를 표시하는 데 사용해야하는 다른 코드가 있습니까?

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

자바 스크립트 :

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