web-dev-qa-db-fra.com

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

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

Quelle est la meilleure façon de rendre 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 une bonne solution?

html5internet-explorerplaceholder
131
Arbejdsglæde

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

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

88
red_alert

Vous pouvez utiliser n'importe lequel de ces polyfills:

Ces scripts ajouteront un support pour l'attribut placeholder dans les navigateurs qui ne le supportent pas, et ils ne nécessitent pas jQuery!

89
starbeamrainbowlabs

le $. Browser.msie n'est plus sur la dernière version de 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>
24
azote

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 d'espace réservé
  2. HTML5 polyfills - Aller à la section placeholder
3
Ravi Gadag

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 des 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"));
        }
    });
}
3
Alex Harper
$(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

2
Rejeesh Prarath

J'utilise thisone, 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 é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 celle de l'id #email. Ne pas utiliser getElementsByClassName, car les versions de IE qui ne prennent pas en charge les espaces réservés, ne prennent pas en charge getElementsByClassName!

Vous pouvez utiliser un espace réservé lors de la saisie d'un mot de passe en définissant le type de saisie du mot de passe d'origine en texte.

Tinker: http://tinker.io/4f7c5/1 - Les serveurs JSfiddle sont hors service!

*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>
1
Florislw

Pour les autres atterrissant 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. Avec l'aimable autorisation de http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

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

Voici une fonction javascript qui créera des espaces réservés pour IE 8 et les versions antérieures, ainsi que 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>
0
Jeff Baker

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émonstration à partir de https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.Zip

0
Aman

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...
}
0
p1errot

Comme la plupart des solutions utilisent jQuery ou ne sont pas aussi satisfaisantes que je l’aurais souhaité, j’ai écrit un extrait 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 les autres, mais ça marche bien. __ espace réservé est une classe ccs qui rend la couleur du texte fictif fantaisie.

J'ai utilisé le fix_placeholder dans window.addEvent ('domready', ... et pour tout code ajouté comme les popups.

J'espère que vous aimez.

Sincères amitiés.

0
Mario