Espace réservé et IE != Fbsa (espace Réservé et IE9 ne fonctionne pas)

Donc, je vais essayer d'obtenir l'espace réservé à l'attribut de travailler dans IE9 et ci-dessous. Cependant, je reçois un comportement étrange (voir les captures d'écran ci-dessous).

J'ai trouvé ce site internet et a décidé d'utiliser le code JS ci-dessous:

JS:

    //Checks browser support for the placeholder attribute
    jQuery(function() {
    jQuery.support.placeholder = false;
    test = document.createElement('input');
    if('placeholder' in test) jQuery.support.placeholder = true;
    });

    //Placeholder for IE
    $(function () {
        if(!$.support.placeholder) { 

            var active = document.activeElement;
            $(':text, textarea').focus(function () {
                if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                    $(this).val('').removeClass('hasPlaceholder');
                }
            }).blur(function () {
                if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                    $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
                }
            });
            $(':text, textarea').blur();
            $(active).focus();
            $('form').submit(function () {
                $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
            });
        }  

    });

HTML:

    <p>
        <label>To: </label>
        <input type="text"  id="toEmail" placeholder="Recipient's Email Address" />
    </p>       

    <p>
        <label>From:</label>
        <input type="text" id="fromName" placeholder="Your Name" />
    </p>

    <p>
        <label>From: </label>
        <input type="text" id="fromEmail" placeholder="Your Email Address" />
    </p>

    <p>
        <label>Message:</label>
        <textarea rows="5" cols="5" id="messageEmail"></textarea>
    </p>

CSS:

.hasPlaceholder {
    color: #999;
}

Mon site ouvre un modal avec une forme en elle. Toutefois, lorsque le modal est ouvert pour la première fois, aucun texte de l'espace réservé apparaît:

Cependant, si je clique dans le champ de texte, puis cliquez en dehors de la zone de texte, le texte de l'espace réservé montre.

J'aimerais que le texte révèle immédiatement une fois que le modal a été ouvert. C'est tout à fait...

FYI- je soupçonne qu'il est possible que le texte n'a pas d'à priori parce que mon modal est caché à l'origine. Comment pourrais-je régler ce problème, si c'est le cas?

REMARQUE: JE SAIS QUE LES PLUGINS EXISTENT. JE NE VEUX PAS UTILISER DE PLUGINS.

Chaîne .blur() sur la fin après .blur(function () {/* ... */}), aussi, pourquoi n'êtes-vous pas la mise en cache $(this)?
J'ai peur que cela ne fonctionne pas...
Je suppose que j'ai pu, mais je suis en utilisant emprunté code, donc je l'ai fait très peu de modifications. Si par la mise en cache this je peux stocker la variable et l'ont injecté dans le modal, puis j'ai pu voir, c'est l'utilité.
$(this).show( '.placeholder' ); //Not working fait ce qu'il dit, il ne fonctionne pas. Je ne suis pas sûr de ce que $(this) est censé être ou de ce passage d'un sélecteur de classe pour show est censé faire, mais je ne pouvais pas exécuter ce code avec cette ligne comme-est. Pas sûr que ce commentaire utile.
ouais, c'est un mauvais code. Je l'ai pris. Je vais le prendre ici.
Où que vous capable de résoudre ce problème?
Yep. Voir ma réponse ci-dessous.
Génial heureux que vous l'avez!

InformationsquelleAutor Keven | 2013-09-23

Changer votre jquery pour cela:

; (function ($) {
$.fn.placehold = function (placeholderClassName) {
var placeholderClassName = placeholderClassName || "placeholder",
supported = $.fn.placehold.is_supported();
function toggle() {
for (i = 0; i < arguments.length; i++) {
arguments[i].toggle();
}
}
return supported ? this : this.each(function () {
var $elem = $(this),
placeholder_attr = $elem.attr("placeholder");
if (placeholder_attr) {
if ($elem.val() === "" || $elem.val() == placeholder_attr) {
$elem.addClass(placeholderClassName).val(placeholder_attr);
}
if ($elem.is(":password")) {
var $pwd_shiv = $("<input />", {
"class": $elem.attr("class") + " " + placeholderClassName,
"value": placeholder_attr
});
$pwd_shiv.bind("focus.placehold", function () {
toggle($elem, $pwd_shiv);
$elem.focus();
});
$elem.bind("blur.placehold", function () {
if ($elem.val() === "") {
toggle($elem, $pwd_shiv);
}
});
$elem.hide().after($pwd_shiv);
}
$elem.bind({
"focus.placehold": function () {
if ($elem.val() == placeholder_attr) {
$elem.removeClass(placeholderClassName).val("");
}
},
"blur.placehold": function () {
if ($elem.val() === "") {
$elem.addClass(placeholderClassName).val(placeholder_attr);
}
}
});
$elem.closest("form").bind("submit.placehold", function () {
if ($elem.val() == placeholder_attr) {
$elem.val("");
}
return true;
});
}
});
};
$.fn.placehold.is_supported = function () {
return "placeholder" in document.createElement("input");
};
})(jQuery);

Ensuite, la fonction de travail:

$("input, textarea").placehold("something-temporary");

Merci pour le nouveau code. Je vais essayer si mon code ne fonctionne pas, mais je veux d'abord voir si je peux obtenir ce que je dois travailler.
np je l'utilise toujours avec Modernizr, de sorte qu'il fonctionne sur IE7+ pour l'espace réservé

InformationsquelleAutor Riskbreaker

1

Il s'avère que mon problème n'était pas sans rapport avec le code lui-même, mais avait un problème avec le placement du code.

J'ai placé le code JS directement dans le index.html fichier, quand je devrais l'avoir placé à l'intérieur d'un autre emailmodal.js fichier.

Je pense que le problème résidait dans le fait que le modal est d'abord caché, donc, lorsque le JS s'exécute, ces champs de texte n'existent pas encore. Il n'est pas jusqu'à ce que j'ouvre le modal et cliquez sur dans le champ de texte, que ces domaines tout à coup "exister".

Les gars, vous pouvez me corriger si je me trompe, mais mon problème est résolu maintenant.

InformationsquelleAutor Keven

Vous devez vous connecter pour publier un commentaire.