Programing

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

lottogame 2020. 8. 19. 22:28
반응형

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

type="date"아래 그림과 같이 입력 필드를 시도 할 때 phonegap 앱을 수행하고 있는데, 예상대로 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) 현재이 2 개 스 니펫을 성공적으로 사용했습니다 (또한 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;
}

나를 위해 작동합니다.

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

HTML 표준 에 따르면 :

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

나는이 부엉 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">

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

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

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

이걸 알아내는 데 시간이 걸리고 위와 같이으로 남겨두고을 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" />

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

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

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

우선 다음 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' :
    '';
  }
}

마우스 오버 및 클릭시 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;
}

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

눈에 거슬리지 않는 자바 스크립트를 염두에두고 @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이라고 모델을 변경하고 필요한 경우 [필수]를 입력하는 것입니다. 이렇게하면 자리 표시 자 텍스트가 나타납니다.

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

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의 infront에 자리 표시자를 추가합니다. 날짜 입력의 자리 표시자를 '날짜 :'로 설정하고 입력 내부에 값이없는 경우 색상을 조정할 수도 있습니다. '화면

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

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

mumthezir의 개정 된 코드

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

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

Mathijs Segers의 의견에 따라 iOS에서 더 잘 작동하는 Mumthezir 버전의 확장 :

(일부 AngularJS를 사용하지만 아이디어를 얻을 수 있기를 바랍니다.)

<label style='position:relative'>
    <input type="date" 
           name="dateField" 
           onfocus="(this.type='date')"
           ng-focus="dateFocus=true" ng-blur="dateFocus=false" />
    <span ng-if='!dateFocus && !form.date' class='date-placeholder'>
        Enter date
    </span>
</label>

모두에 래핑되어 있으므로 label를 클릭하면 span자동으로 input.

CSS : 

.date-placeholder {
    display: inline-block;
    position: absolute;
    text-align: left;
    color: #aaa;
    background-color: white;
    cursor: text;
    /* Customize this stuff based on your styles */
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    line-height: 32px;
    padding-left: 12px;
}

참고 URL : https://stackoverflow.com/questions/20321202/not-showing-placeholder-for-input-type-date-field

반응형

'Programing' 카테고리의 다른 글

vi 편집기에서 현재 커서 위치에서 주어진 줄 번호까지 삭제  (0) 2020.08.19
redux를 사용하여 항목을 삭제하는 올바른 방법입니까?  (0) 2020.08.19
분할 lib_main이 여러 번 정의되었습니다.  (0) 2020.08.19
int를 NSString으로 어떻게 변환 할 수 있습니까?  (0) 2020.08.19
자바 버튼으로 브라우저에서 링크를여시겠습니까?  (0) 2020.08.18

'Programing'의 다른글

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

관련글

댓글

티스토리툴바