Comment prendre en charge l’atsortingbut d’espace réservé dans IE8 et 9

J’ai un petit problème, l’atsortingbut d’ placeholder pour les zones de saisie n’est pas pris en charge dans IE 8-9.

Quelle est la meilleure façon de faire ce support dans mon projet (ASP Net). J’utilise jQuery. Ai-je besoin d’autres outils externes pour cela?

Est-ce que http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html est une bonne solution?

Vous pouvez utiliser ce plugin jQuery: https://github.com/mathiasbynens/jquery-placeholder

Mais votre lien semble également être une bonne solution.

Vous pouvez utiliser l’un de ces polyfills:

Ces scripts ajoutent la prise en charge de l’atsortingbut d’ placeholder dans les navigateurs qui ne le prennent pas en charge, et ils ne nécessitent pas jQuery!

le $ .Browser.msie n’est plus sur le dernier JQuery … vous devez utiliser le $ .support

comme ci-dessous:

   

Si vous utilisez jquery, vous pouvez faire comme ça. depuis ce site Placeholder with Jquery

 $('[placeholder]').parents('form').submit(function() { $(this).find('[placeholder]').each(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); } }) }); 

ce sont les liens alternatifs

  1. Bibliothèque jquery
  2. Polyfills HTML5 – Section des espaces réservés

J’ai eu des problèmes de compatibilité avec plusieurs plugins que j’ai essayés, cela me semble être la manière la plus simple de supporter les espaces réservés sur les entrées de texte:

 function placeholders(){ //On Focus $(":text").focus(function(){ //Check to see if the user has modified the input, if not then remove the placeholder text if($(this).val() == $(this).attr("placeholder")){ $(this).val(""); } }); //On Blur $(":text").blur(function(){ //Check to see if the use has modified the input, if not then populate the placeholder back into the input if( $(this).val() == ""){ $(this).val($(this).attr("placeholder")); } }); } 
 $(function(){ if($.browser.msie && $.browser.version <= 9){ $("[placeholder]").focus(function(){ if($(this).val()==$(this).attr("placeholder")) $(this).val(""); }).blur(function(){ if($(this).val()=="") $(this).val($(this).attr("placeholder")); }).blur(); $("[placeholder]").parents("form").submit(function() { $(this).find('[placeholder]').each(function() { if ($(this).val() == $(this).attr("placeholder")) { $(this).val(""); } }) }); } }); 

essaye ça

J’utilise thisone, c’est uniquement du Javascript.

J’ai simplement un élément d’entrée avec une valeur et lorsque l’utilisateur clique sur l’élément d’entrée, il le transforme en un élément d’entrée sans valeur.

Vous pouvez facilement changer la couleur du texte en utilisant CSS. La couleur de l’espace réservé est la couleur de l’ID #IEinput, et la couleur de votre texte saisi est la couleur de l’ID #email. N’utilisez pas getElementsByClassName, car les versions d’IE qui ne prennent pas en charge un espace réservé ne prennent pas non plus en charge getElementsByClassName!

Vous pouvez utiliser un espace réservé dans une entrée de mot de passe en définissant le type de saisie du mot de passe d’origine dans le texte.

Tinker: http://tinker.io/4f7c5/1 – Les serveurs JSfiddle sont en panne!

*Désolé pour mon mauvais anglais

JAVASCRIPT

 function removeValue() { document.getElementById('mailcontainer') .innerHTML = ""; document.getElementById('email').focus(); } 

HTML

    

Pour les autres qui débarquent ici. C’est ce qui a fonctionné pour moi:

 //jquery polyfill for showing place holders in IE9 $('[placeholder]').focus(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); input.removeClass('placeholder'); } }).blur(function() { var input = $(this); if (input.val() == '' || input.val() == input.attr('placeholder')) { input.addClass('placeholder'); input.val(input.attr('placeholder')); } }).blur(); $('[placeholder]').parents('form').submit(function() { $(this).find('[placeholder]').each(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); } }) }); 

Ajoutez simplement ceci dans votre fichier script.js. Gracieuseté de http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Comme la plupart des solutions utilisent jQuery ou ne sont pas aussi satisfaisantes que je le souhaitais, j’ai écrit un extrait pour moi-même pour mootools.

 function fix_placeholder(container){ if(container == null) container = document.body; if(!('placeholder' in document.createElement('input'))){ var inputs = container.getElements('input'); Array.each(inputs, function(input){ var type = input.get('type'); if(type == 'text' || type == 'password'){ var placeholder = input.get('placeholder'); input.set('value', placeholder); input.addClass('__placeholder'); if(!input.hasEvent('focus', placeholder_focus)){ input.addEvent('focus', placeholder_focus); } if(!input.hasEvent('blur', placeholder_blur)){ input.addEvent('blur', placeholder_blur); } } }); } } function placeholder_focus(){ var input = $(this); if(input.get('class').contains('__placeholder') || input.get('value') == ''){ input.removeClass('__placeholder'); input.set('value', ''); } } function placeholder_blur(){ var input = $(this); if(input.get('value') == ''){ input.addClass('__placeholder'); input.set('value', input.get('placeholder')); } } 

J’avoue que ça a l’air un peu plus que d’autres mais ça marche bien. __placeholder est une classe ccs pour donner de la couleur à l’espace réservé au texte.

J’ai utilisé fix_placeholder dans window.addEvent (‘domready’, … et pour tout code ajouté de manière supplémentaire, comme les popups.

J’espère que vous aimez.

Sincères amitiés.

J’ai utilisé le code de ce lien http://dipaksblogonline.blogspot.com/2012/02/html5-placeholder-in-ie7-and-ie8-fixed.html

Mais dans la détection de navigateur, j’ai utilisé:

 if (navigator.userAgent.indexOf('MSIE') > -1) { //Your placeholder support code here... } 
  

Ajoutez le code ci-dessous et ce sera fait.

    

Téléchargez le code complet et la démo depuis https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip

Voici une fonction javascript qui créera des espaces réservés pour IE 8 et ci-dessous et qui fonctionne aussi pour les mots de passe:

 /* 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')) 
 
   

Correction simple!

Il y a un correctif avec CSS, il suffit de mettre ce code dans votre fichier de style et tous les espaces réservés fonctionneront correctement:

 input.your-input-class: -ms-input-placeholder { color: #000000; //Your font color }