Comment prendre en charge l'attribut d'espace réservé dans IE8 et 9

J'ai un petit problème, l' placeholderattribut 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. Dois-je utiliser d'autres outils externes pour cela?

Http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html est-il 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:

• https://github.com/jamesallardice/Placeholders.js (ne prend pas en charge les champs de mot de passe)
• https://github.com/chemerisuk/better-placeholder-polyfill

Ces scripts ajouteront la prise en charge de l' placeholderattribut 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:

 <script>

     (function ($) {
         $.support.placeholder = ('placeholder' in document.createElement('input'));
     })(jQuery);


     //fix for IE7 and IE8
     $(function () {
         if (!$.support.placeholder) {
             $("[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("");
                     }
                 });
             });
         }
     });
 </script>

si vous utilisez jquery, vous pouvez faire comme ceci. à partir de ce site Espace réservé avec 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 d'espace réservé
2. Polyfills HTML5 - allez à la section espace réservé

J'ai eu des problèmes de compatibilité avec plusieurs plugins que j'ai essayés, cela me semble être le moyen le plus simple de prendre en charge 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 celui-ci, c'est seulement 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 change 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 tapé sera 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 l'entrée de mot de passe d'origine sur 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 = "<input id=\"email\" type=\"text\" name=\"mail\">";
    document.getElementById('email').focus(); }

HTML

<span id="mailcontainer">
    <input id="IEinput" onfocus="removeValue()" type="text" name="mail" value="mail">
</span>

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

Puisque 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 rendre la couleur du texte d'espace réservé fantaisie.

J'ai utilisé le fix_placeholder dans window.addEvent ('domready', ... et pour tout code ajouté comme des 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 du navigateur, j'ai utilisé:

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

<input type="text" name="Name" value="Name" onfocus="this.value = ''" onblur=" if(this.value = '') { value = 'Name'}" />

Ajoutez le code ci-dessous et ce sera fait.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="https://code.google.com/p/jquery-placeholder-js/source/browse/trunk/jquery.placeholder.1.3.min.js?r=6"></script>
    <script type="text/javascript">
        // Mock client code for testing purpose
        $(function(){
            // Client should be able to add another change event to the textfield
            $("input[name='input1']").blur(function(){ alert("Custom event triggered."); });    
            // Client should be able to set the field's styles, without affecting place holder
            $("textarea[name='input4']").css("color", "red");

            // Initialize placeholder
            $.Placeholder.init();

            // or try initialize with parameter
            //$.Placeholder.init({ color : 'rgb(255, 255, 0)' });

            // call this before form submit if you are submitting by JS
            //$.Placeholder.cleanBeforeSubmit();
        });
    </script>

Téléchargez le code complet et la démo sur 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 également 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'))

<form id="fm">
  <input type="text" name="email" placeholder="Email">
  <input type="password" name="password" placeholder="Password">
  <textarea name="description" placeholder="Description"></textarea>
</form>

    <script>
        if ($.browser.msie) {
            $('input[placeholder]').each(function() {

                var input = $(this);

                $(input).val(input.attr('placeholder'));

                $(input).focus(function() {
                    if (input.val() == input.attr('placeholder')) {
                        input.val('');
                    }
                });

                $(input).blur(function() {
                    if (input.val() == '' || input.val() == input.attr('placeholder')) {
                        input.val(input.attr('placeholder'));
                    }
                });
            });
        }
        ;
    </script>