Wie simuliere ich die Platzhalterfunktionalität im Eingabedatumsfeld?

Lesezeit: 4 Minuten

Wie simuliere ich die Platzhalterfunktionalitat im Eingabedatumsfeld
Schkarik

Es ist unmöglich, Platzhalter in Datumsfeldern zu verwenden, aber ich brauche es wirklich.

Ich möchte zwei Datumseingaben mit den Texten „Von“ und „Bis“ als Platzhalter.

  • Legen Sie den Anzeigenvorgabewert fest, der verschwindet onfocus und taucht wieder auf onblur ?

    – Jeff Noel

    9. August 13 um 12:12 Uhr


  • Wenn Sie das Verhalten von Platzhaltern in inkompatiblen Browsern simulieren, denken Sie daran, wie sich dies auf Ihre Validierung auswirkt.

    – chris.nesbit1

    9. August 13 um 12:16 Uhr

  • Von und Bis sind <label>s, nicht placeholderS.

    – QUentin

    25. Februar 14 um 16:28 Uhr

Wie simuliere ich die Platzhalterfunktionalitat im Eingabedatumsfeld
römisch

Ich verwende den folgenden CSS-only-Trick:

  input[type="date"]:before {
    content: attr(placeholder) !important;
    color: #aaa;
    margin-right: 0.5em;
  }
  input[type="date"]:focus:before,
  input[type="date"]:valid:before {
    content: "";
  }
<input type="date" placeholder="Choose a Date" />

  • Leider scheint dies in Chrome als “placeholdermm/dd/yyyy” angezeigt zu werden.

    – Goldin

    1. Mai 14 um 19:54 Uhr

  • Ja. Funktioniert nur auf iOS und Chrome auf Android. Es ist ein Hack 🙂

    – Römisch

    1. Mai 14 um 21:18 Uhr

  • Hinzufügen margin-right: 0.5em; zur ersten Deklaration, um eine schöne Trennung zwischen dem Platzhalter und der Eingabe zu schaffen. Sie können die erste Zeile auch ändern in: content: attr(placeholder)':';um einen Doppelpunkt zwischen dem Platzhalter und der Eingabe hinzuzufügen.

    – Fatah Khalsa

    18. Februar 15 um 23:20 Uhr

  • Sie müssten nur hinzufügen !important nach dem Inhaltsattribut :focus und :valid, da es sonst überschrieben wird. Ansonsten schöner Hack 🙂

    – Michail Minkow

    4. März 16 um 17:23 Uhr

  • Funktioniert bei mir nicht, Chrome 70 – ich habe immer noch: “placeholdermm/dd/yyyy”

    – Schankam

    22. Oktober 18 um 5:02 Uhr

Wie simuliere ich die Platzhalterfunktionalitat im Eingabedatumsfeld
Abdo-Host

Verwenden Sie dieses Eingabeattribut events

onfocus="(this.type="date")" onblur="(this.type="text")"

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container mt-3">
  <label for="date">Date : </label>
  <input placeholder="Your Date" class="form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date">
</div>

  • Es funktioniert, aber Sie müssen auf das Feld doppelklicken, um den Kalender anzuzeigen.

    – Patterson

    12. September 19 um 14:02 Uhr

  • Dies funktioniert nicht in ios 14 – es öffnet die Tastatur anstelle einer Datumsauswahl, aber die Eingabe wird zu einem Datumsfeld, sodass Sie den Text, den Sie eingeben, nicht sehen.

    – Pfadfinder

    27. März 21 um 16:15 Uhr

  • wie hast du das doppelklicken wegbekommen? @Patterson

    – karinapichardo

    14. April 21 um 18:25 Uhr

1644073386 988 Wie simuliere ich die Platzhalterfunktionalitat im Eingabedatumsfeld
Abdullah Geith

Sie können CSS vor Pseudo verwenden.

.dateclass {
  width: 100%;
}

.dateclass.placeholderclass::before {
  width: 100%;
  content: attr(placeholder);
}

.dateclass.placeholderclass:hover::before {
  width: 0%;
  content: "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<input
  type="date"
  placeholder="Please specify a date"
  onClick="$(this).removeClass('placeholderclass')"
  class="dateclass placeholderclass">

GEIGE

  • Wie die andere ähnliche Antwort funktioniert es in Firefox nicht.

    – Sam Ruby

    19. Dezember 19 um 15:46 Uhr

Sie können so etwas tun:

<input onfocus="(this.type="date")" class="js-form-control" placeholder="Enter Date">

Das HTML5-Datumseingabefeld unterstützt das Attribut für Platzhalter tatsächlich nicht. Es wird vom Browser immer ignoriert, zumindest gemäß der aktuellen Spezifikation.

Wie hier angemerkt

Ich verwende diese CSS-Methode, um Platzhalter am Eingabedatum zu simulieren.

Das einzige, was js benötigt, ist das setAttribute des Werts, wenn Sie React verwenden, funktioniert es sofort.

input[type="date"] {
  position: relative;
}

input[type="date"]:before {
  content: attr(placeholder);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  color: rgba(0, 0, 0, 0.65);
  pointer-events: none;
  line-height: 1.5;
  padding: 0 0.5rem;
}

input[type="date"]:focus:before,
input[type="date"]:not([value=""]):before
{
  display: none;
}
<input type="date" placeholder="Choose date" value="" onChange="this.setAttribute('value', this.value)" />

Der input[type="date"] DOMElement nimmt nur den folgenden Wert an: YYYY-MM-DDalle anderen Formate oder Texte werden übersprungen.

Live-Demo

HTML

<input type="text" placeholder="bingo" />
<input type="date" placeholder="2013-01-25" />

Reines JavaScript

window.onload = function () {
    /* Grab all elements with a placeholder attribute */
    var element = document.querySelectorAll('[placeholder]');

    /* Loop through each found elements */
    for (var i in element) {
        /* If the element is a DOMElement and has the nodeName "INPUT" */
        if (element[i].nodeType == 1 && element[i].nodeName == "INPUT") {

            /* We change the value of the element to its placeholder attr value */
            element[i].value = element[i].getAttribute('placeholder');
            /* We change its color to a light gray */
            element[i].style.color = "#777";

            /* When the input is selected/clicked on */
            element[i].onfocus = function (event) {
                /* If the value within it is the placeholder, we clear it */
                if (this.value == this.getAttribute('placeholder')) {
                    this.value = "";
                    /* Setting default text color */
                    this.style.color = "#000";
                };
            };

            /* We the input is left */
            element[i].onblur = function (event) {
                /* If the field is empty, we set its value to the placeholder */
                if (this.value == "") {
                    this.value = this.getAttribute('placeholder');
                    this.style.color = "#777";
                }
            };
        }
    }
}

Leistungsbeurteilung

In genau diesem Fall mit 2 input Elemente, reines JavaScript ist ~40 % ± 10 % schneller.

Mit 32 input Elemente bleibt der Unterschied gleich (~43 % ± 10 % schneller für Pure JS).

.

784560cookie-checkWie simuliere ich die Platzhalterfunktionalität im Eingabedatumsfeld?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy