Points forts d'entrée pour Internet Explorer

En regardant la section «Formulaires Web: entrée de réserve» de HTML5 Cross Browser Polyfills , l'un que j'ai vu était jQuery-html5-placeholder .

J'ai essayé la démo avec IE9, et il semble que cela enveloppe votre <input> avec une portée 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 regardées toutes. L'un d'entre eux, Placeholders.js , se proclame en tant que "Pas de dépendances" (donc il n'est pas nécessaire d'inclure jQuery, contrairement à la plupart des scripts de Polyfill). "

Edit: Pour ceux qui s'intéressent davantage à "comment" ce "quoi", comment créer un polyfill de HTML5 de placeholder avancé qui parcourt le processus de création d'un plugin jQuery qui fait cela.

Aussi, voir garder l'espace réservé sur la mise au point dans IE10 pour les commentaires sur la façon dont le texte de l'espace réservé disparaît sur la mise au point avec IE10, qui diffère de Firefox et Chrome. Je ne sais pas s'il existe une solution pour ce problème.

Le meilleur de 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 quand il est temps de soumettre. Voici 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 cherchez une superposition, mais vous pourriez préférer la facilité de cette route (maintenant, sachant ce que j'ai écrit ci-dessus). Si oui, j'ai écrit ceci pour mes propres projets et ça marche très bien (nécessite jQuery) et ne prend que quelques minutes à mettre en œuvre pour tout votre site. Il offre d'abord un texte gris, un gris clair lorsqu'il est enfoncé et noir lors de la saisie. Il offre également le texte de l'espace réservé chaque fois que le champ de saisie est vide.

Créez d'abord votre formulaire et incluez vos attributs d'espace réservé sur les balises de saisie.

 <input placeholder="enter your email here"> 

Copiez simplement ce code et enregistrez-le comme espace réservé.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 

C'est ainsi que je vous recommande de l'implémenter sur tous les champs de saisie sur 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 avoir des problèmes dans IE, voici celui qui fonctionne:

https://github.com/parndt/jquery-html5-placeholder-shim/

Ce que j'ai aimé, vous incluez simplement le fichier js. Pas besoin de l'initier ou de rien.

• Fonctionne uniquement pour IE9 +

La solution suivante se lie à entrer des éléments de texte avec l'attribut d'espace réservé. Il émule un comportement d'espace réservé juste pour IE et efface le champ de valeur de la saisie si vous ne le modifiez pas.

Ajoutez ce script et IE semble 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(''); } }); }); } }); 

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 de cette façon:

 bindInOut($('#input'),'Here your value :)'); 

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 jquery hack, et ça a parfaitement fonctionné dans mes projets

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); 

Simple comme ceci:

 $(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:

http://plugins.jquery.com/project/kegles-jquery-placeholder

Site: http://www.kegles.com.br/jquery-placeholder/

Je viens avec un script JQuery d'espace réservé simple qui permet une couleur personnalisée et utilise un comportement différent d'effacement des entrées lorsqu'il est concentré. Il remplace l'espace réservé par défaut dans Firefox et Chrome et ajoute un 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 super-léger drop-in placeful jQuery polyfill que j'ai écrit. Il est moins de 1 KB minifié.

Je me suis assuré que cette bibliothèque répond à vos deux préoccupations:

1. Placeholdr étend la fonction jQuery $ .fn.val () pour empêcher les valeurs de retour inattendues lorsque le texte est présent dans les champs de saisie à la suite de Placeholdr. Donc, si vous adhérez à l'API jQuery pour accéder aux valeurs de vos champs, vous n'aurez pas besoin de changer de chose.

2. Placeholdr écoute les soumissions de formulaire et supprime le texte de l'espace réservé des champs afin que le serveur affiche simplement une valeur vide.

Encore une fois, mon objectif avec Placeholdr est de fournir une solution simple à la question de l'espace réservé. Faites-moi savoir sur Github s'il y a autre chose que vous seriez intéressé par le soutien de Placeholdr.

Pour insérer le plugin et vérifier le ie est parfaitement travaillé.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 (eg 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> 

Voici une fonction javascript pure (sans jquery) qui créera des espaces réservés pour IE 8 et ci-dessous et cela fonctionne aussi pour les mots de passe. Il lit l'attribut d'espace réservé HTML5 et crée un élément d'extension 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> 

REMARQUE: l'auteur de ce polyfill affirme qu'il «fonctionne à peu près dans n'importe quel navigateur que vous pouvez imaginer», mais selon les commentaires qui ne sont pas vrais pour IE11, cependant IE11 a un support natif, tout comme la plupart des navigateurs modernes

Placeholders.js est le meilleur polyuréthane d'espace réservé que j'ai vu, est léger, ne dépend pas de JQuery, couvre d'autres navigateurs plus anciens (pas seulement IE) et dispose d'options pour les espaces réservés hide-on-input et run-once.

J'utilise jquery.placeholderlabels . Il est basé sur ceci et peut être démoqué ici .

Travaille dans ie7, ie8, ie9.

Le comportement imite le comportement actuel de Firefox et de chrome – où le texte "espace réservé" reste visible sur la mise au point et disparaît seulement une fois que quelque chose est tapé dans le champ.

J'ai créé mon propre plugin jQuery après avoir été frustré que les cales existantes cacheraient l'espace réservé sur la mise au point, ce qui crée une expérience utilisateur inférieure et ne correspond pas à la façon dont Firefox, Chrome et Safari le traitent. C'est particulièrement le cas si vous souhaitez que l'on concentre une entrée lorsqu'une page ou un popup se charge d'abord, tout en affichant l'espace réservé jusqu'à ce que le texte soit entré.

https://github.com/nspady/jquery-placeholder-labels/