web-dev-qa-db-de.com

Platzhalter für Eingabetyp = "Datum" wird nicht angezeigt

Ich mache eine Phonegap-App und versuche, das type="date"-Eingabefeld wie unten gezeigt auszuprobieren. Es zeigt die Datumsauswahl im iPhone wie erwartet, jedoch nicht den von mir angegebenen Platzhalter. Ich habe das gleiche Problem hier in SO gefunden, aber nirgendwo eine Lösung, hoffe jemand kann mir helfen. Vielen Dank.

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

Es ist vielleicht nicht angebracht ... aber es hat mir endlich geholfen.

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

Wenn Sie die Methode mvp verwenden, das Ereignis onblur jedoch hinzufügen, um es wieder in ein Textfeld zu ändern, erscheint der Platzhaltertext erneut, wenn das Eingabefeld den Fokus verliert. Es macht den Hack nur ein bisschen schöner.

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

Hoffe das hilft.

67
jbarlow

Am Ende habe ich Folgendes verwendet.

In Bezug auf Firefox-Kommentare: Im Allgemeinen zeigt Firefox keinen Textplatzhalter für Eingabetyp-Datum an. Da es sich jedoch um eine Cordova/PhoneGap-Frage handelt, sollte dies kein Problem darstellen (es sei denn, Sie möchten gegen FirefoxOS entwickeln).

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

Ich habe dies in meinem CSS verwendet:

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

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

und etwas in Javascript einfügen:

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

es funktioniert für mich für mobile Geräte (Ios8 und Android). Aber ich habe eine Jquery-Eingabemaske für den Desktop mit dem Eingabetexttyp verwendet. Diese Lösung ist ein schöner Weg, wenn Ihr Code auf ie8 läuft.

Seit heute (2016) habe ich diese beiden Snippets erfolgreich verwendet (und sie funktionieren hervorragend mit Bootstrap4).

Geben Sie links die Daten ein, links den Platzhalter

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

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

Platzhalter verschwinden beim Klicken

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

Ich habe dieses Whit jQuery verwendet: 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

Gemäß dem HTML-Standard :

Die folgenden Inhaltsattribute dürfen nicht angegeben werden und gelten nicht für das Element: Accept, Alt, Checked, Dirname, Formaction, Formenctype, Formmethod, Formnovalidate, Formtarget, Höhe, Eingabemodus, Maxlength, Minlength, Multiple, Muster, Platzhalter), size, src und width.

8
int32_t

Basierend auf Deadproxor und Alessio-Antworten würde ich versuchen, nur CSS zu verwenden:

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

Und wenn Sie den Platzhalter nach dem Schreiben von etwas in die Eingabe unsichtbar machen müssen, können Sie versuchen, die Auswahlmöglichkeiten: gültig und: ungültig zu verwenden, falls Ihre Eingabe erforderlich ist.

EDIT

Hier der Code, wenn Sie in Ihrer Eingabe benötigt werden:

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

Für mich geht das:

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

Um das Problem in der aktuellen richtigen Antwort anzugehen, wird beim Klicken auf das Feld anstelle der Datumsauswahl die Bildschirmtastatur angezeigt:

Das Problem wird dadurch verursacht, dass sich der Browser beim Klicken auf (= Text) entsprechend der Art der Eingabe verhält. Daher ist es notwendig, die Fokussierung auf das Eingabeelement (Unschärfe) zu beenden und den Fokus programmatisch auf das Eingabeelement neu zu starten, das im ersten Schritt von JS als Typ = Datum definiert wurde. Die Tastatur wird im Telefonnummernmodus angezeigt.

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

Um das Problem mit den Datumseingaben zusammenzufassen:

  • Sie müssen sie anzeigen (d. H. Vermeiden: keine). Andernfalls wird die Eingabe-Benutzeroberfläche nicht ausgelöst.
  • ein Platzhalter ist widersprüchlich (laut Spezifikation und weil sie eine bestimmte Benutzeroberfläche anzeigen müssen);
  • das Konvertieren in einen anderen Eingabetyp für die nicht fokussierte Zeit do erlaubt Platzhalter. Der Fokus löst dann die falsche Eingabe-Benutzeroberfläche (Tastatur) aus, zumindest für eine kurze Zeit, da Fokusereignisse nicht abgebrochen werden können.
  • durch das Einfügen (vor) oder Hinzufügen (Nach) von Inhalten wird der Datumseingabewert nicht verhindert.

Die Lösung, die ich gefunden habe, um diese Anforderungen zu erfüllen, besteht darin, die üblichen Formelemente mit dem üblichen Trick zu gestalten: Stellen Sie sicher, dass das Element angezeigt wird, aber nicht sichtbar ist, und den erwarteten Stil über die zugehörige Bezeichnung anzeigt. Normalerweise wird das Etikett als Eingabe (einschließlich Platzhalter) angezeigt, jedoch darüber. 

Also ein HTML wie:

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

Könnte wie folgt gestaltet werden:

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

Jedes Ereignis (Klicken, Fokus) auf einem solchen zugeordneten Etikett wird im Feld selbst angezeigt und löst somit die Datumseingabe-Benutzeroberfläche aus.

Wenn Sie eine solche Lösung live testen möchten, können Sie diese Angular-Version von Ihrem Tablet oder Mobiltelefon aus ausführen. 

2
Javarome

Ich habe eine Weile gebraucht, um das herauszufinden, lass es als type="text" Und füge onfocus="(this.type='date')" hinzu, wie oben gezeigt.

Ich mag sogar die oben erwähnte Idee von onBlur

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

Ich hoffe, das hilft allen, die nicht ganz verstanden haben, was oben los ist

2
Dally S

Ich arbeite mit ionicframework und der von @Mumthezir bereitgestellten Lösung ist fast perfekt. Für den Fall, dass jemand dasselbe Problem wie ich hätte (nach Änderung ist die Eingabe immer noch fokussiert und beim Scrollen verschwindet der Wert einfach). Also habe ich onchange hinzugefügt, um input.blur ()

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

Sie können 

  1. legen Sie es als Typ Text fest 
  2. konvertieren zu datum auf fokus
  3. klicken Sie darauf
  4. ... lassen Sie den Benutzer das Datum überprüfen
  5. bei Änderung den Wert speichern
  6. setze Eingabe, um Text einzugeben
  7. setzen Sie den Texteingabewert auf den gespeicherten Wert

so was...

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

Also, was ich beschlossen habe, ist endlich hier und es funktioniert gut mit allen mobilen Browsern, einschließlich iPhones und Androids.

$(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>

Datum 

2
NISHANK KUMAR

Ich bin auf die Idee gekommen, aber ich habe ein Wenn in der Unschärfefunktion hinzugefügt, damit die Felder ihren Typ nur ändern, wenn der Wert leer ist

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

Einen besseren Weg gefunden, um das grundlegende Verständnis des Benutzers durch Mouseover und Öffnen des Datepickers beim Klicken zu handhaben:

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

Verstecken Sie auch den Webkit-Pfeil und machen Sie ihn 100% breit, um den Klick zu verdecken:

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

Aus der Winkelansicht ist es mir gelungen, einen Platzhalter in das Datumselement des Eingabetyps zu setzen.

Zuerst habe ich folgende CSS definiert:

.placeholder {
    color: $text-grey;
  }

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

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

Der Grund, warum dies notwendig ist, ist, dass, wenn der css3-Inhalt eine andere Farbe als der normale Platzhalter hat, ich einen gemeinsamen verwenden musste.

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

Anschließend wurde in der Vorlage ein viewchild birthDate-Attribut verwendet, um auf diese Eingabe von der Komponente aus zugreifen zu können. Und definierte einen Winkelausdruck für das Platzhalterattribut, der entscheidet, ob der Platzhalter angezeigt wird oder nicht. Dies ist der Hauptnachteil der Lösung: Sie müssen die Sichtbarkeit des Platzhalters verwalten.

@ViewChild('birthDate') birthDate;

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

Ich habe einen besseren Weg gefunden, um Ihr Problem zu lösen ... Ich denke, das wird Ihnen helfen.

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

Ich habe gestern Abend die gleiche Ausgabe gefunden und eine Kombination aus all Ihrer Antwort und etwas funkelnder Magie gefunden, die gute Arbeit leisten:

Das HTML:

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

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

Die jQuery:

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

Erklärung: Was hier also vor allem inHTMLpassiert, ist ziemlich einfach, wenn Sie nur eine einfache HMTL5-Datumseingabe durchführen und einen Platzhalter setzen . Nächste Station:CSS, setzen wir ein: vor-Pseudo-Element, um unseren Platzhalter zu fälschen, es übernimmt lediglich das Attribut des Platzhalters aus der Eingabe selbst. Ich habe dies nur aus einer Breite des Viewports von 1024px verfügbar gemacht - warum werde ich es später erzählen ... Und jetzt die jQuery , nachdem ich ein paar Mal überarbeitet hatte, kam ich mit diesem Code, der es überprüfen wird jede Änderung, wenn ein Wert festgelegt ist oder nicht, wenn nicht, wird die Klasse (neu) hinzugefügt (und umgekehrt).

WISSEN PROBLEME:

  • es gibt ein Problem in Chrome mit seiner Standard-Datumsauswahl, dafür gibt es die Media-Abfrage. Der Platzhalter wird vor dem Standard-Ding "dd.mm.yyyy" hinzugefügt. Sie können den Platzhalter für die Datumseingabe auch auf 'date:' setzen und die Farbe ohne Wert innerhalb der Eingabe anpassen. Für mich ergeben sich daraus einige kleinere Probleme, daher habe ich es einfach nicht angezeigt Bildschirme

hoffe das hilft! cheerio!

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

Wenn Sie nur mit dem Handy zu tun haben:

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

Überarbeiteter Code von Mumthezir

0
Rae Ian

Hier ist ein weiterer möglicher Hack, der js nicht verwendet und trotzdem css content verwendet. Da :after in einigen Browsern nicht für Eingaben unterstützt wird, müssen Sie die Eingabe auf andere Weise auswählen, ebenso für 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

probiere meine Lösung. Ich benutze das Attribut 'required', um zu erfahren, ob die Eingabe gefüllt ist, und wenn nicht, zeige ich den Text aus dem Attribut 'Platzhalter'

//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
}
0
Roman Yakoviv

Wenn Sie die Lösung von @ mvp mit unaufdringlichem Javascript erweitern, ist hier der Ansatz:

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

Keine der Lösungen funktionierte für mich in Chrome unter iOS 12 ordnungsgemäß und die meisten sind nicht darauf zugeschnitten, mögliche Mehrfacheingaben auf einer Seite zu verarbeiten. Ich habe Folgendes getan, wodurch im Grunde ein falsches Etikett über dem eingegebenen Datum erstellt und dieses beim Tippen entfernt wird. Ich entferne auch das gefälschte Etikett, wenn die Breite des Ansichtsfensters über 992px liegt.

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

Dies funktioniert für mich als Eingabeelement:

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

Dieses CSS zeigt einen permanenten Platzhalter. Der ausgewählte Wert wird nach dem Platzhalter angezeigt.

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

Ich verwende diese Lösung für ein Wordpress-Formular mit Contact-Form-7-Plugin.

0
phlegx

Ich denke, alles, was Sie tun müssen, ist, das Modell so zu ändern, dass das Datumsfeld nullbar ist, und dann [Erforderlich] darauf zu setzen, falls dies erforderlich ist. Wenn Sie dies tun, wird der Platzhaltertext angezeigt.

0
HeresJohnny