web-dev-qa-db-fra.com

Comment simuler la fonctionnalité d'espace réservé dans le champ de date d'entrée?

Il est impossible d'utiliser un espace réservé sur les champs de date, mais j'en ai vraiment besoin.

Je veux deux entrées de date avec les textes "De" et "À" sur chacun comme espaces réservés.

htmlhtml5
34
Shkarik

J'utilise le seul truc CSS suivant:

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

71
Roman

Vous pouvez utiliser les CSS avant le pseudo.

.dateclass {
  width: 100%;
}

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

.dateclass.placeholderclass:hover::before {
  width: 0%;
  content: "";
}
<input
  type="date"
  placeholder="Please specify a date"
  onClick="$(this).removeClass('placeholderclass')"
  class="dateclass placeholderclass">

VIOLON

13
Abdullah Gheith

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

9
Abdo-Host

Vous pouvez faire quelque chose comme ça:

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

Le champ de saisie de la date HTML5 ne prend pas en charge l'attribut pour espace réservé. Il sera toujours ignoré par le navigateur, du moins selon les spécifications actuelles.

Comme noté ici

4
Xenology

input[type="date"] DOMElement prend uniquement la valeur suivante: YYYY-MM-DD, tout autre format ou texte pouvant être ignoré.

Démo en direct

HTML

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

JavaScript pur

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

Examen du rendement

Dans ce cas précis, avec 2 éléments input, Pure JavaScript est ~ 40% ± 10% plus rapide .

Avec 32 éléments input, la différence reste la même (environ 43% ± 10% plus rapide pour Pure JS).

2
Jeff Noel

Ok, alors voici ce que j'ai fait:

$(document).on('change','#birthday',function(){
    if($('#birthday').val()!==''){
        $('#birthday').addClass('hasValue');
    }else{
        $('#birthday').removeClass('hasValue');
    }
})

Cela permet de supprimer le paramètre fictif lorsqu'une valeur est donnée.

input[type="date"]:before {
  content: attr(placeholder) !important;
  color: #5C5C5C;
  margin-right: 0.5em;
}
input[type="date"]:focus:before,
input[type="date"].hasValue:before {
  content: "" !important;
  margin-right: 0;
}

Sur le focus ou si .hasValue, supprimez le paramètre fictif et sa marge.

0
Raphael Jeger

Comme mentionné ici , je l’ai fait fonctionner avec une pseudo-classe ": before" et un peu de javascript .

 #myInput:before{ content:"Date of birth"; width:100%; color:#AAA; } 
 #myInput:focus:before,
 #myInput.not_empty:before{ content:none }

Ensuite, en javascript, ajoutez la classe "not_empty" en fonction de la valeur des événements onChange et onKeyUp.

Vous pouvez même ajouter tout cela dynamiquement à chaque champ de date. Vérifiez ma réponse sur l'autre fil pour le code.

Ce n'est pas parfait, mais cela fonctionne bien dans les vues Web de Chrome et iOS7. Peut-être que cela pourrait vous aider.

0
Guillaume Gendre

Comme je l'ai mentionné ici

initialement définir le type de champ à texte.

le focus changer pour taper la date

0
sidarcy

J'utilise cette méthode CSS pour simuler un espace réservé à la date d'entrée.

La seule chose dont js a besoin est de définirAttribut de la valeur. Si vous utilisez React, cela fonctionne immédiatement.

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)" />
0
felixmosh

Essaye ça:

Ajoutez un attribut de marque de réservation à votre champ avec la valeur souhaitée, puis ajoutez ce jQuery:

$('[placeholder]').each(function(){
    $(this).val($(this).attr('placeholder'));
  }).focus(function(){
    if ($(this).val() == $(this).attr('placeholder')) { $(this).val(''); }
  }).blur(function(){
    if ($(this).val() == '') { $(this).val($(this).attr('placeholder')); }
  });

Je ne l'ai pas testée pour les champs qui ne peuvent pas être des espaces réservés, mais vous ne devriez rien changer du code.

Sur une autre note, ce code est également une excellente solution pour les navigateurs qui ne prennent pas en charge l'attribut d'espace réservé.

0
Coop

Utiliser un jQuery (bien sûr, vous pouvez y parvenir avec Vanilla. Ceci vous assure que le format de la date reste identique.

$(function() {
  $('.sdate').on('focus', function() {
    $(this).attr('type', 'date');
  });
  $('.sdate').on('blur', function() {
    if(!$(this).val()) { // important
      $(this).attr('type', 'text');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<input type="text" class="sdate" placeholder="From">

0
ngakak