web-dev-qa-db-fra.com

L'espace réservé HTML5 disparaît sur le focus

Existe-t-il un plugin jQuery disponible gratuitement qui modifie le comportement de placeholder pour correspondre aux spécifications HTML5?

Avant la mise au point
chrome unfocused placeholder

Bonne mise au point (Safari)
safari focused placeholder

Sur Focus Bad (Chrome, Firefox)
chrome focused placeholder

Vous pouvez faire ce que votre navigateur fait avec ce simple violon .

Le projet de spécification HTML5 dit :

Les agents utilisateurs doivent présenter cet indice à l'utilisateur, après en avoir supprimé les sauts de ligne, lorsque la valeur de l'élément est la chaîne vide et/ou le contrôle est non focalisé (par exemple en l'affichant à l'intérieur d'un contrôle non focalisé vierge et en le cachant autrement).

Le "/ ou" est nouveau dans le brouillon actuel, donc je suppose que c'est pourquoi Chrome et Firefox ne le prennent pas encore en charge. Voir bogue WebKit # 73629 , Bug Chrome # 103025 .

htmljquery-pluginssafarifocusplaceholder
26
Dan Abramov

Stefano labels

Stefano J. Attardi a écrit un plugin Nice jQuery qui fait juste cela.
Il est plus stable que celui de Robert et s'estompe également en un gris plus clair lorsque le champ est focalisé.

J'ai modifié son plugin pour lire l'attribut placeholder au lieu de créer manuellement un span.
Ce violon a le code complet:

HTML

<input type="text" placeholder="Hello, world!">

JS

// Original code by Stefano J. Attardi, MIT license

(function($) {
    function toggleLabel() {
        var input = $(this);

        if (!input.parent().hasClass('placeholder')) {
            var label = $('<label>').addClass('placeholder');
            input.wrap(label);

            var span = $('<span>');
            span.text(input.attr('placeholder'))
            input.removeAttr('placeholder');
            span.insertBefore(input);
        }

        setTimeout(function() {
            var def = input.attr('title');
            if (!input.val() || (input.val() == def)) {
                input.prev('span').css('visibility', '');
                if (def) {
                    var dummy = $('<label></label>').text(def).css('visibility','hidden').appendTo('body');
                    input.prev('span').css('margin-left', dummy.width() + 3 + 'px');
                    dummy.remove();
                }
            } else {
                input.prev('span').css('visibility', 'hidden');
            }
        }, 0);
    };

    function resetField() {
        var def = $(this).attr('title');
        if (!$(this).val() || ($(this).val() == def)) {
            $(this).val(def);
            $(this).prev('span').css('visibility', '');
        }
    };

    var fields = $('input, textarea');

    fields.live('mouseup', toggleLabel); // needed for IE reset icon [X]
    fields.live('keydown', toggleLabel);
    fields.live('paste', toggleLabel);
    fields.live('focusin', function() {
        $(this).prev('span').css('color', '#ccc');
    });
    fields.live('focusout', function() {
        $(this).prev('span').css('color', '#999');
    });

    $(function() {
       $('input[placeholder], textarea[placeholder]').each(
           function() { toggleLabel.call(this); }
       );
    });

})(jQuery);

CSS

.placeholder {
  background: white;
  float: left;
  clear: both;
}
.placeholder span {
  position: absolute;
  padding: 5px;
  margin-left: 3px;
  color: #999;
}
.placeholder input, .placeholder textarea {
  position: relative;
  margin: 0;
  border-width: 1px;
  padding: 6px;
  background: transparent;
  font: inherit;
}

/* Hack to remove Safari's extra padding. Remove if you don't care about pixel-perfection. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .placeholder input, .placeholder textarea { padding: 4px; }
}
15
Dan Abramov

Robert Nyman discute du problème et documente son approche dans son blog .
Ce violon qui a tous les HTML, CSS et JS nécessaires.

enter image description here

Malheureusement, il résout le problème en changeant value.
Cela ne fonctionnera pas par définition si placeholder text est lui-même une entrée valide.

4
Dan Abramov

J'ai trouvé cette question en recherchant sur Google la solution au même problème. Il semble que les plugins existants ne fonctionnent pas dans les anciens navigateurs ou masquent l'espace réservé sur le focus.

J'ai donc décidé de rouler sur ma propre solution tout en essayant de combiner les meilleures parties des plugins existants.

Vous pouvez le vérifier ici et ouvrir un problème si vous rencontrez des problèmes.

3
Andrey Kuzmin

Et quelque chose de simple comme ça? Sur focus, enregistrez la valeur d'attribut d'espace réservé et supprimez l'attribut entièrement; sur flou, remettez l'attribut:

$('input[type="text"]').focus( function(){
  $(this).attr("data-placeholder",$(this).attr('placeholder')).removeAttr("placeholder");
});
$('input[type="text"]').blur( function(){
  $(this).attr("placeholder",$(this).attr('data-placeholder'));
});
2
Logan

J'ai écrit ma propre solution css3 uniquement. Voyez si cela répond à tous vos besoins.

http://codepen.io/fabiandarga/pen/MayNWm

Voici ma solution:

  1. l'élément d'entrée est défini sur "requis"
  2. un élément span supplémentaire pour l'espace réservé est nécessaire. Cet élément est déplacé au-dessus de l'élément d'entrée (position: absolue;)
  3. avec les sélecteurs css, la validité de l'élément d'entrée est testée (les champs obligatoires ne sont pas valides tant qu'il n'y a pas d'entrée) et l'espace réservé est alors masqué.

Piège: L'espace réservé bloque les événements de souris à l'entrée! Ce problème est contourné en masquant l'élément d'espace réservé lorsque la souris se trouve à l'intérieur du parent (wrapper).

<div class="wrapper">
  <input txpe="text" autofocus="autofocus" required/>
  <span class="placeholder">Hier text</span>
</div>

.placeholder {
  display: none;
  position: absolute;
  left: 0px;
  right: 0;
  top: 0px;
  color: #A1A1A1;
}
input:invalid + .placeholder {
  display: block;  /* show the placeholder as long as the "required" field is empty */
}
.wrapper:hover .placeholder {
  display: none; /* required to guarantee the input is clickable */
}

.wrapper{
  position: relative;
  display: inline-block;
}
1
Fabian

Vous pouvez peut-être essayer avec le modèle d'étiquette flottante :)

Voir Float labels in CSS

0
herchila