Espaces réservés d'entrée pour Internet Explorer
HTML5 a introduit l'attribut placeholder sur les éléments input, ce qui permet d'afficher un texte par défaut grisé.
Malheureusement, Internet Explorer, y compris IE 9, ne le prend pas en charge.
Il existe déjà des scripts de simulation d'espaces réservés. Ils fonctionnent généralement en plaçant le texte par défaut dans le champ de saisie, lui attribuent une couleur grise et le suppriment à nouveau dès que le champ de saisie est mis au point.
L'inconvénient de cette approche est que le texte d'espace réservé est dans le champ de saisie. Ainsi:
- les scripts ne peuvent pas facilement vérifier si un champ de saisie est vide
- le traitement côté serveur doit vérifier la valeur par défaut afin de ne pas insérer l'espace réservé dans la base de données.
Je voudrais avoir une solution, où le texte d'espace réservé ne soit pas dans l'entrée elle-même.
En examinant la section "Formulaires Web: espace réservé d'entrée" de Polyfills de navigateur en travers HTML5 , celle que j'ai vue était jQuery-html5-placeholder .
J'ai essayé le démo avec IE9, et on dirait qu'il enveloppe votre <input> d'une étendue et recouvre une étiquette avec le texte de l'espace réservé.
<label>Text:
<span style="position: relative;">
<input id="placeholder1314588474481" name="text" maxLength="6" type="text" placeholder="Hi Mom">
<label style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="placeholder1314588474481">Hi Mom</label>
</span>
</label>
Il y a aussi d'autres cales là-bas, mais je ne les ai pas toutes vues. L'un d'eux, Placeholders.js , s'annonce comme "Aucune dépendance (il n'est donc pas nécessaire d'inclure jQuery, contrairement à la plupart des scripts polyfill à espace réservé)".
Edit: Pour ceux qui sont plus intéressés par "comment" que "quoi", Comment créer un polyfill d'espace réservé HTML5 avancé qui marche en créant un plugin jQuery qui effectue cela.
Voir aussi garder l’espace réservé en évidence dans IE1 pour obtenir des commentaires sur la façon dont le texte d’espace réservé disparaît de manière active avec IE10, qui diffère de Firefox et de Chrome. Pas sûr s'il y a une solution à ce problème.
Le meilleur dans mon expérience est https://github.com/mathiasbynens/jquery-placeholder (recommandé par html5please.com ). http://afarkas.github.com/webshim/demos/index.html a également une bonne solution parmi sa bibliothèque beaucoup plus étendue de polyfills.
Avec une implémentation jQuery, vous pouvez FACILEMENT supprimer les valeurs par défaut au moment de la soumission. Ci-dessous un exemple:
$('#submit').click(function(){
var text = this.attr('placeholder');
var inputvalue = this.val(); // you need to collect this anyways
if (text === inputvalue) inputvalue = "";
// $.ajax(... // do your ajax thing here
});
Je sais que vous recherchez une superposition, mais vous préférerez peut-être la facilité de cette route (sachant maintenant ce que j'ai écrit ci-dessus). Si c'est le cas, alors j'ai écrit ceci pour mes propres projets et cela fonctionne vraiment bien (nécessite jQuery) et ne prend que quelques minutes à mettre en œuvre pour l'ensemble de votre site. Il offre d’abord un texte gris, gris clair lors de la mise au point et noir lors de la frappe. Il propose également le texte de substitution lorsque le champ de saisie est vide.
Commencez par configurer votre formulaire et incluez vos attributs d'espace réservé sur les balises d'entrée.
<input placeholder="enter your email here">
Copiez simplement ce code et enregistrez-le sous le nom placeholder.js.
(function( $ ){
$.fn.placeHolder = function() {
var input = this;
var text = input.attr('placeholder'); // make sure you have your placeholder attributes completed for each input field
if (text) input.val(text).css({ color:'grey' });
input.focus(function(){
if (input.val() === text) input.css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
input.val("").css({ color:'black' });
});
});
input.blur(function(){
if (input.val() == "" || input.val() === text) input.val(text).css({ color:'grey' });
});
input.keyup(function(){
if (input.val() == "") input.val(text).css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
input.val("").css({ color:'black' });
});
});
input.mouseup(function(){
if (input.val() === text) input.selectRange(0,0);
});
};
$.fn.selectRange = function(start, end) {
return this.each(function() {
if (this.setSelectionRange) { this.setSelectionRange(start, end);
} else if (this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
});
};
})( jQuery );
Utiliser sur une seule entrée
$('#myinput').placeHolder(); // just one
Voici comment je vous recommande de l'implémenter dans tous les champs de saisie de votre site lorsque le navigateur ne prend pas en charge les attributs d'espace réservé HTML5:
var placeholder = 'placeholder' in document.createElement('input');
if (!placeholder) {
$.getScript("../js/placeholder.js", function() {
$(":input").each(function(){ // this will work for all input fields
$(this).placeHolder();
});
});
}
Après avoir essayé quelques suggestions et constaté des problèmes dans IE, voici celui qui fonctionne:
https://github.com/parndt/jquery-html5-placeholder-shim/
Ce que j'ai aimé - vous n'incluez que le fichier js. Pas besoin de l'initier ou quoi que ce soit.
Je vous suggère une fonction simple:
function bindInOut(element,value)
{
element.focus(function()
{
if(element.val() == value) element.val('');
}).
blur(function()
{
if(element.val() == '') element.val(value);
});
element.blur();
}
Et pour l'utiliser, appelez-le ainsi:
bindInOut($('#input'),'Here your value :)');
- Fonctionne uniquement pour IE9 +
La solution suivante se lie aux éléments de texte en entrée avec l'attribut placeholder. Il émule un comportement d'espace réservé uniquement pour IE et efface le champ de valeur de l'entrée lors de l'envoi s'il n'est pas modifié.
Ajoutez ce script et IE semblerait prendre en charge les espaces réservés HTML5.
$(function() {
//Run this script only for IE
if (navigator.appName === "Microsoft Internet Explorer") {
$("input[type=text]").each(function() {
var p;
// Run this script only for input field with placeholder attribute
if (p = $(this).attr('placeholder')) {
// Input field's value attribute gets the placeholder value.
$(this).val(p);
$(this).css('color', 'gray');
// On selecting the field, if value is the same as placeholder, it should become blank
$(this).focus(function() {
if (p === $(this).val()) {
return $(this).val('');
}
});
// On exiting field, if value is blank, it should be assigned the value of placeholder
$(this).blur(function() {
if ($(this).val() === '') {
return $(this).val(p);
}
});
}
});
$("input[type=password]").each(function() {
var e_id, p;
if (p = $(this).attr('placeholder')) {
e_id = $(this).attr('id');
// change input type so that the text is displayed
document.getElementById(e_id).type = 'text';
$(this).val(p);
$(this).focus(function() {
// change input type so that password is not displayed
document.getElementById(e_id).type = 'password';
if (p === $(this).val()) {
return $(this).val('');
}
});
$(this).blur(function() {
if ($(this).val() === '') {
document.getElementById(e_id).type = 'text';
$(this).val(p);
}
});
}
});
$('form').submit(function() {
//Interrupt submission to blank out input fields with placeholder values
$("input[type=text]").each(function() {
if ($(this).val() === $(this).attr('placeholder')) {
$(this).val('');
}
});
$("input[type=password]").each(function() {
if ($(this).val() === $(this).attr('placeholder')) {
$(this).val('');
}
});
});
}
});
Vous pouvez utiliser :
var placeholder = 'search here';
$('#search').focus(function(){
if ($.trim($(this).val()) === placeholder){
this.value ='';
}
}).blur(function(){
if ($.trim($(this).val()) === ''){
this.value = placeholder;
}
}).val(placeholder);
J'ai trouvé une solution assez simple en utilisant cette méthode:
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
c'est un bidouillage jquery, et cela a parfaitement fonctionné sur mes projets
Simple comme ça:
$(function() {
...
var element = $("#selecter")
if(element.val() === element.attr("placeholder"){
element.text("").select().blur();
}
...
});
J'ai écrit un plugin jquery pour résoudre ce problème .. c'est gratuit ..
Répertoire JQuery:
Je suis arrivé avec un script JQuery à espace réservé simple qui permet une couleur personnalisée et utilise un comportement différent pour effacer les entrées lorsqu'il est ciblé. Il remplace l'espace réservé par défaut dans Firefox et Chrome et ajoute le support pour IE8.
// placeholder script IE8, Chrome, Firefox
// usage: <input type="text" placeholder="some str" />
$(function () {
var textColor = '#777777'; //custom color
$('[placeholder]').each(function() {
(this).attr('tooltip', $(this).attr('placeholder')); //buffer
if ($(this).val() === '' || $(this).val() === $(this).attr('placeholder')) {
$(this).css('color', textColor).css('font-style','italic');
$(this).val($(this).attr('placeholder')); //IE8 compatibility
}
$(this).attr('placeholder',''); //disable default behavior
$(this).on('focus', function() {
if ($(this).val() === $(this).attr('tooltip')) {
$(this).val('');
}
});
$(this).on('keydown', function() {
$(this).css('font-style','normal').css('color','#000');
});
$(this).on('blur', function() {
if ($(this).val() === '') {
$(this).val($(this).attr('tooltip')).css('color', textColor).css('font-style','italic');
}
});
});
});
Placeholdr est un polyfill jQuery polyfill inséré dans une structure ultra-légère que j'ai écrite. C'est moins de 1 Ko minifié.
Je me suis assuré que cette bibliothèque répondait à vos deux préoccupations:
Placeholdr étend le fonction jQuery $ .fn.val () pour empêcher les valeurs de retour inattendues lorsque du texte est présent dans les champs de saisie à la suite de Placeholdr. Donc, si vous vous en tenez à l'API jQuery pour accéder aux valeurs de vos champs, vous n'avez rien à changer.
Placeholdr écoute les formulaires soumis et supprime le texte de substitution des champs afin que le serveur voie simplement une valeur vide.
Encore une fois, mon objectif avec Placeholdr est de fournir une solution simple au problème des espaces réservés. Faites-moi savoir sur Github s'il y a autre chose qui pourrait vous intéresser si vous avez le soutien de Placeholdr.
POUR insérer le plugin et vérifier que le ie est parfaitement travailléjquery.placeholder.js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.placeholder.js"></script>
<script>
// To test the @id toggling on password inputs in browsers that don’t support changing an input’s @type dynamically (e.g. Firefox 3.6 or IE), uncomment this:
// $.fn.hide = function() { return this; }
// Then uncomment the last rule in the <style> element (in the <head>).
$(function() {
// Invoke the plugin
$('input, textarea').placeholder({customClass:'my-placeholder'});
// That’s it, really.
// Now display a message if the browser supports placeholder natively
var html;
if ($.fn.placeholder.input && $.fn.placeholder.textarea) {
html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> and <code>textarea</code> elements.</strong> The plugin won’t run in this case, since it’s not needed. If you want to test the plugin, use an older browser ;)';
} else if ($.fn.placeholder.input) {
html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> elements, but not for <code>textarea</code> elements.</strong> The plugin will only do its thang on the <code>textarea</code>s.';
}
if (html) {
$('<p class="note">' + html + '</p>').insertAfter('form');
}
});
</script>
NOTE: l'auteur de ce polyfill affirme qu'il "fonctionne dans pratiquement tous les navigateurs imaginables", mais selon les commentaires, ce n'est pas le cas pour IE11, cependant IE11 prend en charge le langage natif, comme le font la plupart des navigateurs modernes
Placeholders.js est le meilleur espace réservé que j'ai vu, léger, ne dépend pas de JQuery, couvre d'autres navigateurs plus anciens (pas seulement IE) et offre des options de masquage à l'entrée et espaces réservés run-once.
Voici une fonction javascript pure (pas besoin de jquery) qui créera des espaces réservés pour IE 8 et les versions antérieures, ainsi que pour les mots de passe. Il lit l'attribut d'espace réservé HTML5, crée un élément span derrière l'élément de formulaire et rend l'arrière-plan de l'élément de formulaire transparent:
/* Function to add placeholders to form elements on IE 8 and below */
function add_placeholders(fm) {
for (var e = 0; e < document.fm.elements.length; e++) {
if (fm.elements[e].placeholder != undefined &&
document.createElement("input").placeholder == undefined) { // IE 8 and below
fm.elements[e].style.background = "transparent";
var el = document.createElement("span");
el.innerHTML = fm.elements[e].placeholder;
el.style.position = "absolute";
el.style.padding = "2px;";
el.style.zIndex = "-1";
el.style.color = "#999999";
fm.elements[e].parentNode.insertBefore(el, fm.elements[e]);
fm.elements[e].onfocus = function() {
this.style.background = "yellow";
}
fm.elements[e].onblur = function() {
if (this.value == "") this.style.background = "transparent";
else this.style.background = "white";
}
}
}
}
add_placeholders(document.getElementById('fm'))<form id="fm">
<input type="text" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<textarea name="description" placeholder="Description"></textarea>
</form>