IE9 HTML5 espace réservé - comment sont les gens à atteindre cet objectif?

Je suis en train d'utiliser le placeholder="xxx" attribut dans mon application web, et je ne veux pas avoir un visuel spécial pour IE9. Les gens peuvent jeter quelques bonnes suggestions pour la réalisation de cette fonctionnalité dans IE9?

J'ai trouvé quelques liens ici, mais aucun de ces scripts ont été suffisante... et les réponses ont été à partir de mi-2011, alors j'ai pensé que peut-être il est une meilleure solution là-bas. Peut-être avec un largement adopté plugin jQuery? Je ne veux pas utiliser quoi que ce soit qui nécessite intrusive code comme nécessitant une certaine classe css ou quelque chose.

Grâce.

MODIFIER - j'ai aussi besoin de ce travail pour les champs de saisie de mot de passe.

//the below snippet should work, but isn't.
$(document).ready(function() {
initPlaceholders()();
}
function initPlaceholders() {
$.support.placeholder = false;
var test = document.createElement('input');
if ('placeholder' in test) {
$.support.placeholder = true;
return function() { }
} else {
return function() {
$(function() {
var active = document.activeElement;
$('form').delegate(':text, :password', 'focus', function() {
var _placeholder = $(this).attr('placeholder'),
_val = $(this).val();
if (_placeholder != '' && _val == _placeholder) {
$(this).val('').removeClass('hasPlaceholder');
}
}).delegate(':text, :password', 'blur', function() {
var _placeholder = $(this).attr('placeholder'),
_val = $(this).val();
if (_placeholder != '' && (_val == '' || _val == _placeholder)) {
$(this).val(_placeholder).addClass('hasPlaceholder');
}
}).submit(function() {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
$(':text, :password').blur();
$(active).focus();
});
}
}
}
InformationsquelleAutor Adam Levitt | 2012-07-03
  1. 12

    Nous avons juste fait des recherches la même chose. Nous avons décidé de réutilisation de la ce gist, par Aaron McCall, après avoir fait quelques changements mineurs. Le principal avantage est qu'il est simple, facile à comprendre le code:

    1. Retirez le noyau et setup_placeholders pièces. Il vous suffit d'appeler immédiatement dans une fonction anonyme.

    2. Ajouter var avant test.

    Pour les navigateurs qui prennent en charge placeholder, tout simplement, il revient à cela. Elle s'occupe également de nouveaux éléments d'entrée (notez l'utilisation de delegate) dans les formes actuelles. Mais ne gère pas la dynamique de nouveaux éléments de formulaire. Il pourrait probablement être modifié pour le faire avec jQuery.on.

    Si vous n'aimez pas cela, vous pouvez utiliser l'un de ceux ici. Cependant, certains d'entre eux sont extrêmement compliquées, ou douteux, les décisions de conception comme setTimeout pour détecter de nouveaux éléments.

    Noter qu'il doit utiliser deux paires de parenthèses, puisque vous êtes à l'appel d'une fonction anonyme, puis en appelant la fonction renvoyée (cela pourrait être pris en compte différemment):

    (function () {
//...
})()();
    • Excellent code concis. Vous venez d'enregistrer moi un peu de temps, +1!
    • pour être clair, nous n'avons pas écrire liés gist.
    • Ah. Eh bien, peu importe, merci pour le lien. Il n'y a pas de licence spécifié; savez-vous si il y en a un?
    • Je fait juste essayé de le faire, et rien ne s'est passé dans IE9. Je vais appeler la suggéré de code à partir de: $.de soutien.espace réservé = false;, mais je ne vois pas de ramasser l'espace réservé valeurs d'attribut.... et cela fonctionne pour les champs de mot de passe?
    • ce morceau de code devrait préciser de quelle manière il doit être appelé. Vous pouvez également refactoriser le code afin d'éliminer le "retour d'une fonction" étape.
    • non, il ne fonctionnera pas pour le mot de passe, mais vous pouvez simplement ajouter , :password après :text.
    • Hmm.. Matthieu, merci pour l'invite et détaillée de l'aide, mais je ne suis pas 100% clair sur comment appeler cela, surtout avec l' ()(). J'ai créé une fonction initPlaceholders() { $.de soutien.espace réservé = false; //... reste de la fonction }... mais en l'appelant, il ne fait rien.
    • L'appelant doit retourner une fonction, de sorte qu'il serait initPlaceholders()().
    • Matt, j'ai mis mon code dans mon premier post. Vous pourriez peut-être point ce que je fais mal?
    • êtes-vous en utilisant le texte ou le mot de passe? Aussi, existe-il des erreurs?
    • Je suis à l'aide d'un mot de passe, en fait, et pas d'erreurs. Laissez-moi jeter que :partie du mot de passe sur on. Est-il une syntaxe spéciale pour qui?
    • Il suffit de remplacer :text avec :text, :password à travers l'ensemble de la fonction.
    • Ok, j'ai fait tout cela, mais c'est juste pas montrer quoi que ce soit qui ressemble à un espace réservé. Il n'est pas causant rien de briser dans firefox, mais dans IE9 elle montre des boîtes vides.
    • vous avez omis de deux remplacements dans la fonction.
    • que voulez-vous dire?
    • il y a deux autres endroits, il dit :text, mais faut dire :text, :password. Pendant que vous y êtes, vous souhaitez peut-être utiliser une variable pour cela.
    • merci encore pour la persistance de l'aide. J'ai mis à jour le post original avec votre suggestion de corrections, mais il affiche toujours rien dans les cases. Je commence à me demander si j'ai contradictoires scripts, mais j'en doute.
    • êtes-vous sûr que la forme n'existe à ready temps? Autre que cela, je vais tester sous IE 9 demain. Oh, et c'est dans un formulaire, non?
    • Pour que cela fonctionne sur mot de passe-champs, ils auraient besoin d'être changé de champs de texte (qui n'est pas autorisé dans certaines versions d'IE (dans ce cas, vous devrez créer un temporaire de texte-champ à côté du champ de mot de passe)). Sinon, il serait juste de l'affichage **** à la place du texte de l'espace réservé.
    • Certainement dans un formulaire, et ils doivent exister à la .temps de préparation.
    • qui fait sens, même si je ne sais toujours pas pourquoi il ne montre pas les étoiles pour Adam (peut-être à cause du problème d'actualisation mentionné dans jQuery-espace Réservé). J'ai cherché un peu plus et je l'ai trouvé totalement mise en œuvre différente le long de ces lignes (temporaire). Désolé pour la gêne occasionnée.
    • Le jquery delegate() fonction utilisée en qui gist a été remplacé par on() de jQuery 1.7. La syntaxe est légèrement différente, changez la position du sélecteur et les arguments d'événement api.jquery.com/delegate
    • Ce plugin par Mathias Bynens fonctionne parfaitement, sans peaufinage ou modifications.

    InformationsquelleAutor Matthew Flaschen
  2. 8

    J'ai écrit un plugin jquery un temps, qui ajoute de l'espace réservé à l'appui de n'importe quel navigateur qui ne prend pas en charge et ne fait rien dans ceux qui le font.

    Espace Réservé Plugin

    InformationsquelleAutor corymathews
  3. 2

    Voici un plugin jQuery qui fonctionne avec les champs de mot de passe ainsi. Ce n'est pas aussi minuscule que le code proposé par Matthieu, mais il a un peu plus de correctifs en elle. J'ai utilisé cela avec H5Validate ainsi.

    http://webcloud.se/code/jQuery-Placeholder/

    • Celui-ci fonctionne, mais ne fonctionne pas sur les champs de mot de passe. Quelqu'un a une solution pour ça?
    • Hmm, t travail sur les champs de mot de passe. Vous pouvez voir le code à partir de la ligne 10 ici: github.com/danielstocks/jQuery-Placeholder/blob/master/...
    • C'est juste étrange, parce que ce n'est pas vraiment de se comporter sur le champs de mot de passe. J'ai regardé le code et voir ce que vous pointant du doigt. Hmm....
    • C'est très étrange. Pouvez-vous utiliser un inspecteur DOM pour voir ce qu'il se passe? (espace réservé à l'ensemble, le type d'attribut changements ou mannequin le champ texte est inséré etc?)
    InformationsquelleAutor powerbuoy