J'essaie d'utiliser l'attribut J'ai trouvé quelques liens ici, mais aucun des scripts suggérés ne suffisait ... et les réponses arrivaient à partir de la mi-2011, alors je suis peut-être peut-être pensé Il y a une meilleure solution là-bas. Peut-être avec un plugin jquery largement adopté? Je ne veux pas utiliser quoi que ce soit nécessite un code intrusif tel que nécessitant une certaine classe CSS ou quelque chose. P> merci. P> edit strong> - J'ai aussi besoin de cela travailler pour les champs de saisie de mot de passe. P> Placeholder = "xxx" code> dans mon application Web, et je ne veux pas avoir un visuel spécial pour IE9. Les gens peuvent-ils jeter de bonnes suggestions pour atteindre cette fonctionnalité dans IE9?
// 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();
});
}
}
}
3 Réponses :
Nous venons de rechercher la même chose. Nous avons décidé de réutiliser ce gist , par Aaron McCall , après avoir apporté des changements mineurs. L'avantage principal est que c'est simple, facile à comprendre le code:
Retirez les parties du noyau et de la configuration. Appelez-le immédiatement dans une fonction anonyme. P> li>
Ajouter pour les navigateurs qui supportent Si vous n'aimez pas celui-ci, vous pouvez utiliser l'un quelconque, vous pouvez utiliser l'un des ici . Cependant, certains d'entre eux sont surchargés ou ont des décisions de conception discutable, telles que Notez qu'il doit utiliser deux paires de parens, car vous appelez. Une fonction anonyme, puis appelant la fonction retournée (cela pourrait être prises en compte différemment): p> var code> avant
Test code>. p> li>
ol>
espace réservé code>, cela redevient simplement à cela. Il gère également de nouveaux éléments d'entrée (notez l'utilisation de
délégué code>) sur les formulaires existants. Mais ne gère pas de nouveaux éléments de forme dynamique. Il pourrait probablement être modifié de le faire avec
jquery.on code>. P>
SetTimeout code> pour détecter de nouveaux éléments. P>
Ah. Bien, peu importe, merci pour le lien. Il n'y a pas de licence spécifiée; Savez-vous s'il y en a un?
En fait, j'ai juste essayé de le faire, et rien ne s'est passé dans IE9. J'appelle le code suggéré en commençant par: $ .Support.Parplest.Placeholder = FALSE;, mais je ne le vois pas en ramassant les valeurs d'attribut d'espace réservé ... et cela fonctionne-t-il pour les champs de mot de passe?
@Adamlevitt, cet extrait devrait clarifier la manière dont il devrait être appelé. Vous pouvez également le refroidir pour éliminer l'étape «retour une fonction».
@Adam, non, il ne fonctionnera pas pour le mot de passe, mais vous pouvez simplement ajouter ,: mot de passe code> après
: texte code>.
Hmm .. Matthew, merci pour l'aide rapide et détaillée, mais je ne suis toujours pas clair à 100% sur la façon d'appeler ceci, en particulier avec le () (). J'ai créé une fonction initplace () {$ .Support.Placeholder = false; // ... reste de la fonction} ... mais l'appelant ça ne fait rien.
L'appelant devrait renvoyer une fonction, ce serait donc initplace () () code>.
Matt, j'ai mis mon code dans mon message d'origine. Peut-être que vous pourriez souligner ce que je fais mal?
@Adamlevitt, utilisez-vous du texte ou du mot de passe? Aussi, y a-t-il des erreurs?
J'utilise le mot de passe, en fait et aucune erreur. Laissez-moi jeter ça: pièce de mot de passe là-bas. Y a-t-il une syntaxe spéciale pour cela?
Il suffit de remplacer : texte code> avec
: texte,: mot de passe code> sur toute la fonction.
Ok, je l'ai fait, mais cela ne montre rien à ressembler à un espace réservé. Cela ne fait rien faire de pause dans Firefox, mais dans IE9, il montre des boîtes vierges.
@Adam, vous avez omis deux remplacements dans la fonction.
@Adam, il y a deux autres endroits qu'il indique : texte code>, mais devrait dire
: texte, mot de passe code>. Pendant que vous y êtes, vous souhaiterez peut-être utiliser une variable pour cela.
@Matt - Merci encore pour l'aide persistante. J'ai mis à jour le message d'origine avec vos correctifs suggérés, mais il ne montre toujours rien dans les cases. Je commence à me demander si j'ai des scripts en conflit, bien que j'en doute.
@Adam, êtes-vous sûr que le formulaire existe à prêt code> temps? Autre que cela, je vais devoir tester à IE 9 demain. Oh, et c'est dans i> une forme, non?
Pour que cela fonctionne sur des champs de mot de passe, il faudrait modifier les champs de texte (qui n'est pas autorisé dans certaines versions d'IE (auquel cas vous devrez créer un champ de texte temporaire à côté du champ Mot de passe) ). Sinon, il suffirait d'afficher **** au lieu du texte de l'espace réservé.
@PowerBuoy, qui a du sens, bien que je ne sais toujours pas pourquoi il ne montre pas des stars pour Adam (peut-être à cause du problème de rafraîchissement mentionné dans JQuery-Placeholder ). J'ai cherché un peu plus et j'ai trouvé un Différente implémentation le long de ces lignes (champ temporaire). Désolé pour le dérangement.
La fonction JQuery Délégué () Code> utilisé dans cet essentiel a été remplacée par
sur () code> à partir de jQuery 1.7. La syntaxe n'est que légèrement différente, il suffit de changer les positions du sélecteur et des arguments de l'événement API.JQUERY.com/Delegate < / a>
Ce plugin par Mathias Bylens fonctionne parfaitement sans modification ni modification.
Voici un plugin JQuery qui fonctionne également avec des champs de mot de passe également. Ce n'est pas aussi minuscule que le code suggéré par Matthew, mais il y a quelques réponses supplémentaires. J'ai utilisé cela avec succès avec H5Validate également. P>
Celui-ci fonctionne, mais ne fonctionne pas sur les champs de mot de passe. Quelqu'un a une solution pour cela?
Hmm, c'est fait i> sur les champs de mot de passe. Vous pouvez voir le code pertinent à partir de la ligne 10 ici: Github. Com / Danielstocks / JQuery-Placeholder / Blob / Master / ...
C'est juste étrange car il ne se comporte pas réellement sur les champs de mot de passe. J'ai regardé le code et je vois ce que vous soulignez. Hmm....
C'est très étrange. Pouvez-vous utiliser un inspecteur DOM pour voir ce qui se passe? (ensemble d'espace réservé, changements d'attribut de type ou champ de texte factice est inséré, etc.)?)
J'ai écrit un plugin JQuery A de temps en arrière qui ajoute le support d'espace réservé à n'importe quel navigateur qui ne le supporte pas et ne fait rien dans ceux qui font. P>
Dupliqué possible de espace réservé dans IE9