입력 유형 = "날짜"필드에 대한 자리 표시자가 표시되지 않음

나는 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)
}

나는이 부엉 jQuery를 사용했다 : http://jsfiddle.net/daviderussoabram/65w1qhLz/

$('input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"]').each(function() {
    var el = this, type = $(el).attr('type');
    if ($(el).val() == '') $(el).attr('type', 'text');
    $(el).focus(function() {
        $(el).attr('type', type);
        el.click();
    });
    $(el).blur(function() {
        if ($(el).val() == '') $(el).attr('type', 'text');
    });
});

deadproxor 및 Alessio 답변을 기반으로 CSS 만 사용하려고합니다.

input[type="date"]::before{
    color: #999;
    content: attr(placeholder) ": ";
}
input[type="date"]:focus::before {
    content: "" !important;
}

입력 내용을 작성한 후 자리 표시자를 보이지 않게해야하는 경우 입력이 필요한 경우 : valid 및 : invalid 선택기를 사용해 볼 수 있습니다.

편집하다

입력에 필요한 경우 코드는 다음과 같습니다.

input[type="date"]::before {
	color: #999999;
	content: attr(placeholder);
}
input[type="date"] {
	color: #ffffff;
}
input[type="date"]:focus,
input[type="date"]:valid {
	color: #666666;
}
input[type="date"]:focus::before,
input[type="date"]:valid::before {
	content: "" !important;
}

<input type="date" placeholder="Date" required>

문제를 해결할 더 나은 방법을 찾았습니다. 나는 이것이 당신을 도울 것이라고 생각합니다. 초점이 맞춰지면 상자의 유형이 텍스트로 변경되어 자리 표시자가 표시됩니다. 초점을 맞추면 유형이 날짜로 변경되어 달력보기가 표시됩니다.

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

jbarlow 아이디어를 가져 왔지만 onblur 함수에 if를 추가하여 값이 비어있는 경우에만 필드가 유형을 변경합니다.

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

현재 정답으로 문제 해결 "필드를 클릭하면 날짜 선택기 대신 온 스크린 키보드가 표시됨":

이 문제는 (= 텍스트)를 클릭 할 때 입력 유형에 따라 브라우저가 동작하기 때문에 발생합니다. 따라서 입력 요소 (blur)에 초점을 맞추지 말고 첫 번째 단계에서 JS에 의해 type = date로 정의 된 입력 요소에 프로그래밍 방식으로 초점을 다시 시작해야합니다. 전화 번호 모드에서 키보드가 표시됩니다.

<input placeholder="Date" type="text" onfocus="this.type='date';
                      this.setAttribute('onfocus','');this.blur();this.focus();">

내 해결책을 시도하십시오. '필수'속성을 사용하여 입력이 채워 졌는지 확인하고 그렇지 않은 경우 '자리 표시 자'속성의 텍스트를 표시합니다.

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

//CSS
input[type="date"]:not(:valid):before {
   content: attr(placeholder);
   // style it like it real placeholder
}

이걸 알아내는 데 시간이 걸리고 위와 같이으로 남겨두고을 type="text"추가하십시오 onfocus="(this.type='date')".

위에서 언급 한 onBlur 아이디어도 마음에 듭니다.

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

위의 내용을 수집하지 않은 사람에게 도움이되기를 바랍니다.

날짜 입력 문제를 요약하려면 :

• 표시해야합니다 (예 : display : none 방지). 그렇지 않으면 입력 UI가 트리거되지 않습니다.
• 자리 표시자는 (사양에 따라 특정 UI를 표시해야하기 때문에) 모순됩니다.
• 초점이 맞지 않은 시간 동안 다른 입력 유형으로 변환하면 자리 표시자가 허용되지만 초점 이벤트를 취소 할 수 없기 때문에 적어도 잠시 동안 초점이 잘못된 입력 UI (키보드)를 트리거합니다.
• 콘텐츠를 삽입 (전) 또는 추가 (후)해도 날짜 입력 값이 표시되는 것을 막지는 않습니다.

이러한 요구 사항을 충족하는 것으로 확인 된 솔루션은 기본 양식 요소의 스타일을 지정하는 일반적인 트릭을 사용하는 것입니다. 요소가 표시되지만 표시되지 않는지 확인 하고 관련 레이블을 통해 예상 된 스타일을 표시합니다 . 일반적으로 레이블은 입력 (자리 표시 자 포함)으로 표시되지만 그 위에 표시됩니다.

따라서 다음과 같은 HTML이 있습니다.

<div class="date-input>
  <input id="myInput" type="date"> 
  <label for="myInput"> 
    <span class="place-holder">Enter a date</span> 
  </label>
</div>

스타일은 다음과 같습니다.

.date-input {
  display: inline-block;
  position: relative;
}
/* Fields overriding */
input[type=date] + label {
  position: absolute;  /* Same origin as the input, to display over it */
  background: white;   /* Opaque background to hide the input behind */
  left: 0;             /* Start at same x coordinate */
}

/* Common input styling */
input[type=date], label {  
  /* Must share same size to display properly (focus, etc.) */
  width: 15em;
  height: 1em;
  font-size: 1em;
}

이러한 관련 레이블에 대한 모든 이벤트 (클릭, 포커스)는 필드 자체에 반영되므로 날짜 입력 UI를 트리거합니다.

이러한 솔루션을 실시간으로 테스트하려면 태블릿이나 모바일 에서이 Angular 버전 을 실행할 수 있습니다 .

그래서 내가 마침내 결정한 것은 여기에 있으며 iPhone 및 Android를 포함한 모든 모바일 브라우저에서 잘 작동합니다.

$(document).ready(function(){

  $('input[type="date"]').each(function(e) {
    var $el = $(this), 
        $this_placeholder = $(this).closest('label').find('.custom-placeholder');
    $el.on('change',function(){
      if($el.val()){
        $this_placeholder.text('');
      }else {
        $this_placeholder.text($el.attr('placeholder'));
      }
    });
  });
  
});

label {
  position: relative;  
}
.custom-placeholder {
    #font > .proxima-nova-light(26px,40px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    color: #999;
}

<label>
  <input type="date" placeholder="Date">
  <span class="custom-placeholder">Date</span>
</label>

데이트

@Mumthezir에서 제공하는 ionicframework 및 솔루션으로 작업하는 임은 거의 완벽합니다. 누군가가 나와 같은 문제를 겪는 경우 (변경 후 입력이 여전히 집중되고 스크롤 할 때 값이 사라짐) 그래서 input.blur ()을 만들기 위해 onchange를 추가했습니다.

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

당신은 할 수 있습니다

1. 유형 텍스트로 설정
2. 초점을 맞춘 날짜로 변환
3. 그것을 클릭하십시오
4. ... 사용자 확인 날짜
5. 변화에 가치를 저장하십시오
6. 텍스트를 입력하도록 입력 설정
7. 텍스트 유형 입력 값을 저장된 값으로 설정

이렇게 ...

$("#dateplaceholder").change(function(evt) {
  var date = new Date($("#dateplaceholder").val());
  $("#dateplaceholder").attr("type", "text");
  $("#dateplaceholder").val(date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear());
});
$("#dateplaceholder").focus(function(evt) {
  $("#dateplaceholder").attr("type", "date");
  setTimeout('$("#dateplaceholder").click();', 500);
});
$("#dateplaceholder").attr("type", "text");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="date" id="dateplaceholder" placeholder="Set the date" />

마우스 오버 및 클릭시 datepicker 열기로 사용자 기본 이해를 처리하는 더 나은 방법을 찾았습니다.

<input type="text" onfocus="(this.type='date')" onmouseover="(this.type = 'date')" onblur="(this.value ? this.type = 'date' : this.type = 'text')" id="date_start" placeholder="Date">

또한 웹킷 화살표를 숨기고 클릭을 가리기 위해 100 % 너비로 만듭니다.

input[type="date"] {
    position: relative;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  left: 0;
  right: 0;
  top:0;
  bottom: 0;
}

각도 관점에서 입력 유형 날짜 요소에 자리 표시자를 넣었습니다.

우선 다음 CSS를 정의했습니다.

.placeholder {
    color: $text-grey;
  }

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

  input::-webkit-input-placeholder {
    color: $text-grey;
  }

이것이 필요한 이유는 css3 콘텐츠의 색상이 일반 자리 표시 자와 다른 경우 공통된 것을 사용해야하기 때문입니다.

<input #birthDate
         class="birthDate placeholder"
         type="date"
         formControlName="birthDate"
         placeholder="{{getBirthDatePlaceholder() | translate}}"
         [class.error]="!onboardingForm.controls.birthDate.valid && onboardingForm.controls.birthDate.dirty"
         autocomplete="off"
         >

그런 다음 템플릿에서 viewchild birthDate 속성을 사용하여 구성 요소에서이 입력에 액세스 할 수 있습니다. 자리 표시 자 속성에 각도 표현식을 정의하여 자리 표시자를 표시할지 여부를 결정합니다. 이것이 솔루션의 주요 단점이며 자리 표시 자의 가시성을 관리해야한다는 것입니다.

@ViewChild('birthDate') birthDate;

getBirthDatePlaceholder() {
  if (!this.birthDate) {
    return;
  } else {
    return this.birthDate.nativeElement.value === '' ?
    'ONBOARDING_FORM_COMPONENT.HINT_BIRTH_DATE' :
    '';
  }
}

<input placeholder="Date" type="text" onMouseOver="(this.type='date')" onMouseOut="(this.type='text')"  id="date" class="form-control">

mumthezir의 개정 된 코드

내가 사용한 것과 비슷한 접근 방식을 가진 답이 하나 밖에 없다는 것에 놀랐습니다.
@Mumthezir VP의 답변에 대한 @Dtipson의 의견에서 영감을 얻었습니다.

이를 위해 두 개의 입력을 사용합니다. 하나는 type="text"자리 표시자를 설정 하는 가짜 입력 이고 다른 하나는 type="date". 컨테이너
의 mouseenter이벤트에서 가짜 입력을 숨기고 실제 입력을 표시하고 mouseleave이벤트 에 대해 반대 작업을 수행합니다 . 분명히, 값이 설정되어 있으면 실제 입력을 가시적으로 둡니다.
순수 자바 스크립트를 사용하는 코드를 작성했지만 jQuery를 사용한다면 (저는) "변환"하기가 매우 쉽습니다.

// "isMobile" function taken from this reply:
// https://stackoverflow.com/a/20293441/3514976
function isMobile() {
  try { document.createEvent("TouchEvent"); return true; }
  catch(e) { return false; }
}

var deviceIsMobile = isMobile();

function mouseEnterListener(event) {
  var realDate = this.querySelector('.real-date');
  // if it has a value it's already visible.
  if(!realDate.value) {
    this.querySelector('.fake-date').style.display = 'none';
    realDate.style.display = 'block';
  }
}

function mouseLeaveListener(event) {
  var realDate = this.querySelector('.real-date');
  // hide it if it doesn't have focus (except
  // on mobile devices) and has no value.
  if((deviceIsMobile || document.activeElement !== realDate) && !realDate.value) {
    realDate.style.display = 'none';
    this.querySelector('.fake-date').style.display = 'block';
  }
}

function fakeFieldActionListener(event) {
  event.preventDefault();
  this.parentElement.dispatchEvent(new Event('mouseenter'));
  var realDate = this.parentElement.querySelector('.real-date');
  // to open the datepicker on mobile devices
  // I need to focus and then click on the field.
  realDate.focus();
  realDate.click();
}

var containers = document.getElementsByClassName('date-container');
for(var i = 0; i < containers.length; ++i) {
  var container = containers[i];
  
  container.addEventListener('mouseenter', mouseEnterListener);
  container.addEventListener('mouseleave', mouseLeaveListener);
  
  var fakeDate = container.querySelector('.fake-date');
  // for mobile devices, clicking (tapping)
  // on the fake input must show the real one.
  fakeDate.addEventListener('click', fakeFieldActionListener);
  // let's also listen to the "focus" event
  // in case it's selected using a keyboard.
  fakeDate.addEventListener('focus', fakeFieldActionListener);
  
  var realDate = container.querySelector('.real-date');
  // trigger the "mouseleave" event on the
  // container when the value changes.
  realDate.addEventListener('change', function() {
    container.dispatchEvent(new Event('mouseleave'));
  });
  // also trigger the "mouseleave" event on
  // the container when the input loses focus.
  realDate.addEventListener('blur', function() {
    container.dispatchEvent(new Event('mouseleave'));
  });
}

.real-date {
  display: none;
}

/* a simple example of css to make 
them look like it's the same element */
.real-date, 
.fake-date {
  width: 200px;
  height: 20px;
  padding: 0px;
}

<div class="date-container">
  <input type="text" class="fake-date" placeholder="Insert date">
  <input type="date" class="real-date">
</div>

나는 이것을 안드로이드 폰에서도 테스트했으며 사용자가 필드를 탭하면 datepicker가 표시됩니다. 유일한 것은 실제 입력에 값이없고 사용자가 날짜를 선택하지 않고 날짜 선택기를 닫으면 입력이 외부를 탭할 때까지 계속 표시된다는 것입니다. datepicker가 언제 닫히는 지 알기 위해들을 이벤트가 없으므로 해결 방법을 모르겠습니다.

테스트 할 iOS 기기가 없습니다.

눈에 거슬리지 않는 자바 스크립트를 염두에두고 @mvp의 솔루션을 확장하는 방법은 다음과 같습니다.

HTML :

<input type="text" placeholder="Date" class="js-text-date-toggle">

자바 스크립트 :

$('.js-text-date-toggle').on('focus', function() {
  $(this).attr('type', 'date') }
).on('blur', function() {
  $(this).attr('type'), 'text') }
)

당신이해야 할 일은 날짜 필드가 nullable이라고 모델을 변경하고 필요한 경우 [Required]를 입력하는 것입니다. 이렇게하면 자리 표시 자 텍스트가 나타납니다.

어제 밤에 같은 문제를 만났고 모든 답변과 반짝이는 마법의 조합이 좋은 일을하고 있음을 알았습니다.

HTML :

<input type="date"  name="flb5" placeholder="Datum"     class="datePickerPlaceHolder"/>

CSS :

@media(max-width: 1024px) {
   input.datePickerPlaceHolder:before {
      color: #A5A5A5; //here you have to match the placeholder color of other inputs
      content: attr(placeholder) !important;
   }
}

jQuery :

$(document).ready(function() {
    $('input[type="date"]').change(function(){
            if($(this).val().length < 1) {
                $(this).addClass('datePickerPlaceHolder');
            } else {
                $(this).removeClass('datePickerPlaceHolder');
            }
    });
});

설명 : 그래서, 여기서 일어나는 일은 무엇보다도 HTML에서 , 이것은 기본 HMTL5 날짜 입력을 수행하고 자리 표시자를 설정하는 것만으로도 매우 간단합니다. 다음 중지 : CSS , : before-pseudo-element를 설정하여 플레이스 홀더를 가짜로 만들고 입력 자체에서 플레이스 홀더의 속성을 취합니다. 나는 이것을 1024px의 뷰포트 너비에서만 사용할 수 있도록 만들었습니다. 왜 나중에 말할까요? 그리고 이제 jQuery 는 몇 번 리팩토링 한 후 값 세트가 있는지 여부를 확인하는 모든 변경 사항을 확인하는 코드를 생각해 냈습니다. 그렇지 않으면 클래스를 (재) 추가하고 그 반대의 경우도 마찬가지입니다. .

문제 파악 :

• 기본 날짜 선택기로 크롬에 문제가 있습니다. 그게 미디어 쿼리의 목적입니다. 기본 'dd.mm.yyyy'-thing의 앞에 자리 표시자를 추가합니다. date-input의 자리 표시자를 'date :'로 설정하고 입력 내부에 값이없는 경우 색상을 조정할 수도 있습니다. '화면

도움이 되길 바랍니다! 안녕!

모바일에만 관심이있는 경우 :

input[type="date"]:invalid:before{
    color: rgb(117, 117, 117);
    content: attr(placeholder);
}

HTML :

<div>
    <input class="ui-btn ui-btn-icon-right ui-corner-all ui-icon-calendar ui-shadow" id="inputDate" type="date"/>
    <h3 id="placeholder-inputDate">Date Text</h3>
</div>

자바 스크립트 :

$('#inputDate').ready(function () {
$('#placeholder-inputDate').attr('style'
    , 'top: ' + ($('#placeholder-inputDate').parent().position().top + 10)
    + 'px; left: ' + ($('#placeholder-inputDate').parent().position().left + 0) + 'px; position: absolute;');
$('#inputDate').attr('style'
    , 'width: ' + ($('#placeholder-inputDate').width() + 32) + 'px;');
});

js를 사용하지 않고 여전히 css를 사용하는 또 다른 가능한 해킹이 content있습니다. 로 참고 그 :after에 대한 입력을위한 몇 가지 브라우저에서 지원되지 않습니다, 우리는 다른 방법으로 입력을 선택해야합니다, 같은content attr('')

input[type=date]:invalid+span:after {
  content:"Birthday";
  position:absolute;
  left:0;
  top:0;
}

input[type=date]:focus:invalid+span:after {
  display:none;
}

input:not(:focus):invalid {
  color:transparent;
}

label.wrapper {
	position:relative;
}

<label class="wrapper">
	<input
 	  type="date"
  	  required="required" 
	/>
	<span></span>
</label>

이것은 이것을 입력 요소로 사용하여 나를 위해 작동합니다.

<input name="birthdate" class="" class="wpcf7-form-control wpcf7-date 
 wpcf7-validates-as-required wpcf7-validates-as-date birthdate" value="" 
 aria-required="true" aria-invalid="false" placeholder="birthdate *" 
 type="date">

이 CSS는 영구 자리 표시자를 표시합니다. 선택한 값은 자리 표시 자 뒤에 표시됩니다.

input[type="date"]:before {
    content: attr(placeholder) !important;
    margin-right: 0.5em;
    display: block;
}
/* only for FF */
@-moz-document url-prefix() {
    input[type="date"]:before {
        content: attr(placeholder) !important;
        margin-right: 0.5em;
        display: block;
        position: absolute;
        left: 200px; /* please adopt */
    }
}

이 솔루션을 contact-form-7 플러그인이있는 Wordpress 양식에 사용합니다.

어떤 솔루션도 iOS 12의 Chrome에서 제대로 작동하지 않았으며 대부분은 페이지에서 가능한 여러 날짜 입력에 대처하도록 조정되지 않았습니다. 나는 기본적으로 날짜 입력 위에 가짜 레이블을 만들고 탭에서 제거하는 다음을 수행했습니다. 뷰포트 너비가 992px를 초과하면 가짜 라벨도 제거합니다.

JS :

function addMobileDatePlaceholder() {
    if (window.matchMedia("(min-width: 992px)").matches) {
        $('input[type="date"]').next("span.date-label").remove();
        return false;
    }

    $('input[type="date"]').after('<span class="date-label" />');

    $('span.date-label').each(function() {
        var $placeholderText = $(this).prev('input[type="date"]').attr('placeholder');
        $(this).text($placeholderText);
    });

    $('input[type="date"]').on("click", function() {
        $(this).next("span.date-label").remove();
    });
}

CSS :

@media (max-width: 991px) {
    input[type="date"] {
        padding-left: calc(50% - 45px);
    }

    span.date-label {
        pointer-events: none;
        position: absolute;
        top: 2px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        height: 27px;
        width: 70%;
        padding-top: 5px;
    }
}