web-dev-qa-db-ja.com

入力タイプ= "date"フィールドのプレースホルダーが表示されていません

下の図のようにtype="date"入力フィールドを試してみると、phonegapアプリを実行しているIamが、思ったようにiPhoneの日付ピッカーを表示しますが、指定したプレースホルダーは表示されません。私はここで同じ問題をここで見つけましたSO、しかしどこにも解決策がない、誰かが私を助けることができることを望みます。ありがとう。

 <input placeholder="Date" class="textbox-n" type="date" id="date">
html5cordovadatepickerplaceholder
96
Mumthezir VP

それは適切ではないかもしれません...しかしそれはついに私を助けました。

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

Mvpのメソッドを使用していて、onblurイベントを追加してテキストフィールドに戻す場合は、入力フィールドがフォーカスを失ったときにプレースホルダテキストが再び表示されるようにします。ハックを少し良くするだけです。

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

お役に立てれば。

71
jbarlow

私は次のものを使ってしまいました。

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':'')">
29
fentas

私は私の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");
   }
 });

それはモバイルデバイス（IOS 8とAndroid）のために私のために働きます。しかし、私は入力テキストタイプでデスクトップにjquery inputmaskを使いました。あなたのコードがie8で動くならこの解決策はいい方法です。

20
Alessio Kenta Di Crescenzo

今日（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;
}
16
romaricdrigon

によると HTML標準 ：

次のコンテンツ属性は指定しないでください。要素には適用しないでください。accept、alt、checked、dirname、formaction、forformctype、formmethod、formnovalidate、formtarget、height、inputmode、maxlength、minlength、multiple、pattern、プレースホルダー、サイズ、src、および幅。

9
int32_t

私はこの聖霊降臨祭の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');
    });
});
9
Davide Russo Abram

わたしにはできる：

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

DeadproxorとAlessioの回答に基づいて、私はCSSだけを使ってみるでしょう：

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

また、入力に何かを書いた後にプレースホルダを見えなくする必要がある場合は、入力が必須の場合は：validおよび：invalidセレクタを使用してみてください。

EDIT

ここにあなたが使用している場合のコードはあなたの入力で要求されました：

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

あなたの問題を解決するためのより良い方法を見つけました。これはあなたに役立つと思います。フォーカスが当たっていると、ボックスのタイプがテキストに変わり、プレースホルダーが表示されます。フォーカスされると、その種類が日付に変わり、カレンダービューが表示されます。

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

現在の正しい答えで問題を指摘している「フィールドをクリックすると日付ピッカーの代わりにスクリーンキーボードが表示される」：

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

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

日付入力問題を要約するには

  • そうでなければ入力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を起動します。

そのようなソリューションをライブでテストしたい場合は、タブレットまたは携帯端末から this Angular version を実行できます。

2
Javarome

これを考え出して、しばらくして、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">

これが上で起こっているものをあまり集めなかった人に役立つことを願っています

2
Dally S

@Mumthezirが提供するイオンフレームワークとソリューションを使ったImは、ほとんど完璧です。誰かが私と同じ問題を抱えている場合（変更後、入力はまだフォーカスされており、スクロールすると、値は単に消えてしまう）ですので、私はinput.blur（）を作るためにonchangeを追加しました

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

あなたはできる

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

だから私がやろうと決心したのはここにあり、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>

日付

2
NISHANK KUMAR

私は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">
1
Franco Dipré

私の解決策を試してください。入力が埋められているかどうかを知るために 'required'属性を使い、そうでない場合は属性 '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
}
1
Roman Yakoviv

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

<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;
}
1
Matt Loye

Angularの観点から私はプレースホルダーを入力タイプdate要素に入れることに成功しました。

まず最初に、私は次の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属性を使用して、コンポーネントからこの入力にアクセスできるようにします。そしてplaceholder属性に角度表現を定義しました。これは、placeholderを表示するかどうかを決定します。これは、このソリューションの大きな欠点です。プレースホルダの可視性を管理する必要があるということです。

@ViewChild('birthDate') birthDate;

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

ねえ、私は昨夜同じ問題に遭遇し、あなたの答えすべてといくつかの輝く魔法の組み合わせを考え出しました。

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のビューポート幅からのみ利用できるようにしました - なぜimは後で言うつもりです。そしてjQueryという2、3回リファクタリングした後、値が設定されているかどうかに関わらずすべての変更をチェックするこのコードを思いついた。クラスを追加してください。

既知の問題：

  • デフォルトの日付ピッカーにはchromeに問題があります。それはmedia-queryの目的です。デフォルトの 'dd.mm.yyyy'の前にプレースホルダーが追加されます。また、date-inputのプレースホルダーを 'date：'に設定し、入力内に値がない場合の色を調整することもできます。私にとってこれは他の小さな問題につながりました。 'スクリーン

それが役立つことを願っています！チェリオ！

0
user5672471

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;');
});
0
Or Choban

あなたがモバイルだけに関心があるならば：

input[type="date"]:invalid:before{
    color: rgb(117, 117, 117);
    content: attr(placeholder);
}
0
A2D
<input placeholder="Date" type="text" onMouseOver="(this.type='date')" onMouseOut="(this.type='text')"  id="date" class="form-control">

Mumthezirの改訂コード

0
Rae Ian

これは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>
0
Flavien Volken

邪魔にならない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') }
)
0
poweratom

IOS 12のChrome上で私のために解決策のどれも私のために正しく働いていませんでした、そして、それらのほとんどはページの可能な複数の日付入力に対処するように調整されていません。私は次のようにしました、それは基本的に日付入力の上に偽のラベルを作成してタップでそれを削除します。ビューポートの幅が992ピクセルを超えている場合は、偽のラベルも削除します。

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;
    }
}
0
Niccolò Mineo

これは入力要素としてこれを使用して私のために働きます：

<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フォームにこの解決策を使います。

0
phlegx

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

0
HeresJohnny