Espaces réservés d'entrée pour Internet Explorer

HTML5 a introduit l' placeholderattribut sur les inputéléments, 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 simulateur d'espace réservé. Ils fonctionnent généralement en plaçant le texte par défaut dans le champ de saisie, en lui donnant une couleur grise et en le supprimant à nouveau dès que vous ciblez le champ de saisie.

L'inconvénient de cette approche est que le texte de l'espace réservé se trouve dans le champ de saisie. Donc:

1. les scripts ne peuvent pas facilement vérifier si un champ de saisie est vide
2. 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é n'est pas dans l'entrée elle-même.

En regardant la section "Web Forms: input placeholder" de HTML5 Cross Browser Polyfills , j'ai vu jQuery-html5-placeholder .

J'ai essayé la démo avec IE9, et il semble qu'elle enveloppe votre <input>avec une étendue et superpose 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 regardées. L'un d'eux, Placeholders.js , s'annonce comme "Pas de dépendances (donc pas besoin d'inclure jQuery, contrairement à la plupart des scripts polyfill d'espace réservé)."

Edit: Pour ceux qui s'intéressent davantage à «comment» que «quoi», comment créer un polyfill d'espace réservé HTML5 avancé qui parcourt le processus de création d'un plugin jQuery qui fait cela.

Voir également garder l'espace réservé sur le focus dans IE10 pour des commentaires sur la façon dont le texte de l'espace réservé disparaît lors du focus avec IE10, qui diffère de Firefox et Chrome. Je ne sais pas s'il existe une solution à 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 lorsqu'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 recherchez une superposition, mais vous préférerez peut-être la facilité de cet itinéraire (sachant maintenant ce que j'ai écrit ci-dessus). Si c'est le cas, 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 du texte gris au début, gris clair lors de la mise au point et noir lors de la saisie. Il propose également le texte d'espace réservé chaque fois que le champ de saisie est vide.

Configurez d'abord 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 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

C'est ainsi que je vous recommande de l'implémenter sur 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 vu 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 quoi que ce soit.

• Fonctionne uniquement pour IE9 +

La solution suivante se lie aux éléments de texte d'entrée avec l'attribut d'espace réservé. Il émule un comportement d'espace réservé uniquement pour IE et efface le champ de valeur de l'entrée lors de la soumission 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('');
        }
      });
    });
  }
});

Je vous propose 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 hack jquery, et ça a parfaitement fonctionné sur 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 ç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:

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

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

J'ai mis au point un script JQuery d'espace réservé simple qui permet une couleur personnalisée et utilise un comportement différent pour effacer les entrées lorsque le focus est mis. Il remplace l'espace réservé par défaut dans Firefox et Chrome et ajoute la prise en charge d'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 espace réservé jQuery polyfill super léger que j'ai écrit. C'est moins de 1 Ko minifié.

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

1. Placeholdr étend la fonction jQuery $ .fn.val () pour éviter les valeurs de retour inattendues lorsque du texte est présent dans les champs d'entrée à la suite de Placeholdr. Donc, si vous vous en tenez à l'API jQuery pour accéder aux valeurs de vos champs, vous n'aurez rien à changer.

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

Encore une fois, mon objectif avec Placeholdr est de fournir une solution simple et instantanée au problème des espaces réservés. Faites-moi savoir sur Github s'il y a autre chose qui vous intéresserait d'avoir le support 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>

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

REMARQUE: l'auteur de ce polyfill affirme qu'il "fonctionne dans à peu près tous les navigateurs que vous pouvez imaginer" mais selon les commentaires ce n'est pas vrai pour IE11, cependant IE11 a un support natif, comme le font la plupart des navigateurs modernes

Placeholders.js est le meilleur polyfill 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 propose des options pour les espaces réservés de masquage à l'entrée et d'exécution unique.

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

fonctionne dans ie7, ie8, ie9.

Le comportement imite le comportement actuel de Firefox et Chrome - où le texte «espace réservé» reste visible sur le focus et ne disparaît qu'une fois que quelque chose est tapé dans le champ.

J'ai créé mon propre plugin jQuery après avoir été frustré par le fait que les shims existants masqueraient l'espace réservé sur le focus, ce qui crée une expérience utilisateur inférieure et ne correspond pas non plus à la façon dont Firefox, Chrome et Safari le gèrent. C'est particulièrement le cas si vous souhaitez qu'une entrée soit focalisée lors du premier chargement d'une page ou d'une fenêtre contextuelle, tout en affichant l'espace réservé jusqu'à ce que le texte soit saisi.

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