L'espace réservé HTML5 disparaît au focus
Existe-t-il un plugin jQuery disponible gratuitement qui modifie le comportement de placeholder pour correspondre aux spécifications HTML5?
Avant De Se Concentrer
Mise Au Point Bonne (Safari)
Sur L'Accent Grave (Chrome, Firefox)
Vous pouvez ce que votre navigateur fait avec ce simple violon .
HTML5 projet de spécification dit:
Les agents utilisateurs doivent présenter cette indication à l'utilisateur, après avoir supprimé les sauts de ligne de lorsque la valeur de l'élément est la chaîne vide et/ou, le contrôle n'est pas focalisé (par exemple en l'affichant dans un contrôle non focalisé vide et en le cachant autrement).
Le "/ or " est nouveau dans le projet actuel, donc je suppose que C'est pourquoi Chrome et Firefox ne le supportent pas encore. Voir bogue WebKit #73629, Chrome bug # 103025 .
6 réponses
Stefano J. Attardi a écrit un joli plugin jQuery qui le fait juste.
Il est plus stable que celui de Robert et devient gris plus clair lorsque le champ se concentre.
- voir la page de démonstration
- Saisissez-le sur GitHub
- Jouer avec le violon
J'ai modifié son plugin pour lire placeholder attribut, par opposition à la création manuelle d'un span.
Ce violon est complet code:
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; }
}
Robert Nyman discute du problème et documente son approche dans son blog.
Ce Violon {[4] } qui a tout le HTML nécessaire, CSS et JS.
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.
J'ai trouvé cette question en googlant la solution au même problème. Il semble que les plugins existants ne fonctionnent pas dans les navigateurs anciens 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, ouvrez un problème si vous rencontrez des problèmes.
Que diriez-vous de quelque chose de simple comme ça? Sur le focus, enregistrez la valeur de l'attribut d'espace réservé et supprimez entièrement l'attribut; sur le 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'));
});
J'ai écrit ma propre solution CSS3 seulement. Voyez si cela répond à tous vos besoins.
Http://codepen.io/fabiandarga/pen/MayNWm
C'est ma solution:
- l'élément d'entrée est réglé sur "nécessaire"
- un élément de 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: absolute;)
- 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 caché.
Piège:, L'espace réservé est le blocage mouseevents à l'entrée! Ce problème est contourné en masquant l'élément d'espace réservé lorsque la souris est à 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;
}
Peut-être que vous pouvez essayer avec Flotteur Label Modèle :)