입력 유형 = “날짜”필드에 대한 자리 표시자가 표시되지 않음 날짜 선택기가 표시되지만

나는 phonegap 앱을하고있다. type="date"아래와 같이 입력 필드를 시도 할 때 예상대로 iPhone에 날짜 선택기가 표시되지만 내가 지정한 자리 표시자는 표시되지 않습니다. 나는 여기에서 같은 문제를 발견했지만 어디에서도 해결책이 없습니다.

 <input placeholder="Date" class="textbox-n" type="date" id="date">

답변

적절하지 않을 수도 있지만 … 도움이되었습니다.

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">
스 니펫 확장

답변

mvp의 방법을 사용하지만 onblur 이벤트를 추가하여 텍스트 필드로 다시 변경하면 입력 필드가 포커스를 잃을 때 자리 표시 자 텍스트가 다시 나타납니다. 해킹을 조금 더 멋지게 만듭니다.

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date" />
스 니펫 확장

도움이 되었기를 바랍니다.

답변

나는 다음을 사용하게되었다.

Firefox 주석 관련 : 일반적으로 Firefox는 입력 유형 날짜에 대한 텍스트 자리 표시자를 표시하지 않습니다. 그러나 이것은 Cordova / PhoneGap 질문이므로 걱정할 필요가 없습니다 (FirefoxOS에 대해 개발하고 싶지 않은 경우).

input[type="date"]:not(.has-value):before{
  color: lightgray;
  content: attr(placeholder);
}
<input type="date" placeholder="MY PLACEHOLDER" onchange="this.className=(this.value!=''?'has-value':'')">
스 니펫 확장

답변

내 CSS에서 이것을 사용했습니다.

input[type="date"]:before{
    color:lightgray;
    content:attr(placeholder);
}

input[type="date"].full:before {
    color:black;
    content:""!important;
}

다음과 같은 것을 자바 스크립트에 넣으십시오.

$("#myel").on("input",function(){
    if($(this).val().length>0){
    $(this).addClass("full");
}
else{
   $(this).removeClass("full");
   }
 });

모바일 장치 (Ios8 및 Android)에서 작동합니다. 하지만 입력 텍스트 유형으로 데스크탑에 jquery inputmask를 사용했습니다. 이 솔루션은 코드가 ie8에서 실행되는 경우 좋은 방법입니다.

답변

오늘 (2016) 현재이 두 조각을 성공적으로 사용했습니다 (또한 Bootstrap4에서도 잘 작동합니다).

왼쪽에는 입력 데이터, 왼쪽에는 자리 표시 자

input[type=date] {
  text-align: right;
}

input[type="date"]:before {
  color: lightgrey;
  content: attr(placeholder) !important;
  margin-right: 0.5em;
}

클릭하면 자리 표시자가 사라집니다.

input[type="date"]:before {
  color: lightgrey;
  content: attr(placeholder) !important;
  margin-right: 0.5em;
}
input[type="date"]:focus:before {
  content: '' !important;
}

답변

HTML 표준 에 따르면 :

다음 콘텐츠 속성은 지정해서는 안되며 요소에 적용되지 않아야합니다 : accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, maxlength, minlength, multiple, pattern, placeholder , size, src 및 너비.

답변

나를 위해 작동합니다.

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