入力タイプ=「日付」フィールドのプレースホルダーを表示しない

電話ギャップアプリを実行しています。type="date"以下に示すように入力フィールドを試していると、iPhoneの日付ピッカーが期待どおりに表示されますが、指定したプレースホルダーは表示されません。SOでも同じ問題が見つかりましたが、解決策はどこにもありません。

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

そして、このようなものをJavaScriptに入れます：

$("#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;
}

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セレクターを使用してみることもできます。

編集

入力にrequiredを使用している場合のコードは次のとおりです。

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

現在の正解「フィールドをクリックすると、日付ピッカーの代わりに画面キーボードが表示される」の問題に対処する：

この問題は、（=テキスト）をクリックしたときの入力のタイプに応じて動作するブラウザが原因で発生します。したがって、最初のステップでJSによってtype = dateとして定義されたinput要素でフォーカスを入力要素（ぼかし）にフォーカスするのをやめて、プログラムでフォーカスを再開する必要があります。キーボードは電話番号モードで表示されます。

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

マウスオーバーでクリックして日付ピッカーを開くことでユーザーの基本的な理解を処理するより良い方法を見つけました：

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

また、webkit矢印を非表示にし、クリックをカバーするために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;
}

Angularの観点から、入力タイプの日付要素にプレースホルダーを置くことができました。

まず、次の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">

ムムテジルの改訂されたコード

私が使用したのと同様のアプローチで答えが1つしかないことに驚いています。
@Mumthezir VPの回答に対する@Dtipsonのコメントからインスピレーションを得ました。

これには2つの入力を使用します。1つはtype="text"プレースホルダーを設定するための偽の入力で、もう1つはを使用した実際のフィールドtype="date"です。コンテナー
のmouseenterイベントでは、偽の入力を非表示にして実際の入力を表示し、mouseleaveイベントでは反対のことを行います。明らかに、値が設定されている場合は、実際の入力を表示したままにします。
純粋なJavascriptを使用するようにコードを記述しましたが、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>

私はこれをAndroidフォンでもテストしましたが、ユーザーがフィールドをタップすると、日付ピッカーが表示されます。唯一のことは、実際の入力に値がなく、ユーザーが日付を選択せず​​に日付ピッカーを閉じた場合、その外側をタップするまで入力は表示されたままになります。日付ピッカーが閉じるときを聞くために聞くイベントがないので、それを解決する方法がわかりません。

テスト用のiOSデバイスがありません。

控えめなJavaScriptを念頭に置いて@mvpのソリューションを拡張し、ここにアプローチがあります：

HTML：

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

JavaScript：

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

あなたがしなければならないことは、モデルを変更して日付フィールドがnull可能であると言って、それが必要な場合は[必須]をそれに置くだけだと思います。これを行うと、プレースホルダーテキストが表示されます。

ねえ、私は昨夜同じ問題に遭遇し、あなたの答えのすべてといくつかの輝く魔法の組み合わせが良い仕事をしているのを見つけました：

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-date-inputを実行してプレースホルダーを設定するだけです。次のストップ：CSS、：before-pseudo-elementを設定してプレースホルダーを偽造します。入力自体からプレースホルダーの属性を取得するだけです。私はこれを1024pxのビューポート幅から下でのみ利用できるようにしました-なぜ私は後で教えようとしています。そして今、jQueryは、数回リファクタリングした後、値セットがあるかどうかすべての変更をチェックし、そうでない場合はクラスを（再）追加するこの逆のコードを思いつきました。

既知の問題：

• メディアクエリの目的である、デフォルトの日付ピッカーのあるchromeに問題があります。デフォルトの 'dd.mm.yyyy'-thingの前にプレースホルダーを追加します。また、日付入力のプレースホルダーを「日付：」に設定し、入力内に値がない場合の色を調整することもできます...私にとっては、他のいくつかの小さな問題が発生したため、「大きい」に表示しないだけにしました'画面

お役に立てば幸いです。チェリオ！

モバイルのみに関心がある場合：

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>

JavaScript：

$('#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;
    }
}