Perte du focus d'un élément après un replaceWith

Bonjour à tous.

Voila j'ai un petit problème:

dans un de mes scripts jQuery, j'essaye de remplacer le type d'un input lors de son focus; Hors, il n'est pas possible de modifier directement le type de l'input, cela nous retourne une erreur.

Pour pallier à ce problème j'ai fait comme suit:

Code:

---

$('#monInput').replaceWith($('#monInput').clone().attr('type', 'password'));

---

Le problème étant que cette ligne fait perdre le focus à cet élément.

Dans un cas classique, j'aurai simplement fait un

Code:

---

$('#monInput').focus()

---

sauf que dans mon cas, le replaceWith est déjà dans un on("focus", [...]); ce qui provoque une récursion infinie :/

Aurriez vous une idée de comment régler le problème ?


Edit:
une solution temporaire est de remplacer le on("focus" par un on("click", mais cela ne fait pas exactement ce que je voudrais; j'aimerai que, si possible, cette action ne s’exécute qu'au focus, et non a chaque click sur l'input :)

Merci =D

A quoi sert le replaceWith ?
pourquoi ne pas juste modifier le type ?.

Code:

---

<input type="text" value="mot de passe" id="monInput" />

---

Code:

---

1 2 3 4

$('#monInput').on('focus', function () { $(this).attr('type', 'password'); })

---

je n'ai pas d'erreur avec ce code
http://jsfiddle.net/jRPMh/

Sinon au pire avec one()

Code:

---

1 2 3 4

$('#monInput').one('focus', function () { $(this).replaceWith($('#monInput').clone().attr('type', 'password')); $('#monInput').focus(); });

---

Ah tient, en effet, changer directement le type avec jQuery 1.9 est possible.

Malheureusement je dois utiliser jQuery 1.8.3, et ce n'est pas possible avec cette version. Dans ce cas nous avons le message d'erreur suivant:

Code:

---

Error: type property can't be changed

---

Le problème si j'utilise one(), je suppose, est que cette dernière ne fonctionne qu'une seul fois c'est bien ça ?
Du coup si l'utilisateur quite l'input, et reviens dessus plus tard ça ne marchera plus, si je comprends bien. a moins de redéfinir l'écouteur manuellement à la rigueure.

J'ai trouvé une autre solution sinon, c'est simplement de verifier le type de mon champs avant:

Code:

---

1 2 3 4 5 6 7 8 9 10

$("#monInput").on("focus", function(){ if($(this).attr('type')=="text"){ $(this).replaceWith($('#monInput').clone().attr('type', 'password')); $(this).focus(); } else { [le reste de ma fonction] } });

---

Pour le moment c'est la solution qui me parait le plus clean: le premier passage dans la fonction change le type de mon input, génère un nouveau focus pour que la fonction s’exécute une seconde fois, mais cette fois sans passer la partie de changement de type + focus.

J'aurai bien aimer trouver plus propre, mais bon je pense que c'est tout de même une solution viable.
Si quelqu'un à mieux, je suis preneur :)
sinon je passerai le post en résolu demain :mrgreen:

one me semble plus propre ...

Bah, dans mon cas, l'utilisation de one() me parrait compliqué:

Enfait, il s'agis d'un script d'inscription.

J'ai donc bindé des on("blur") sur le champs de password, pour qu'a la perte du focus de celui ci, un script de verification se lance.
Selon mon cahier des charges, en cas d'erreur je dois faire apparaitre le message d'erreur dans... le champs en question.

Donc, lors de mon on("blur"), je fais mes petites verif, et s'il y a une erreur, je transorme mon input type="password" en input type="text" afin d'y inserer le message d'erreur en value (et donc que celui ci soit lisible).

Par la suite, le but du on("focus") est donc de repasser cet input en type="password" afin que l'utilisateur puisse de nouveau modifier son password éronné. Mais, évidement, à la perte du focus, celui ci doit de nouveau être vérifier et donc peut éventuellement repasser du type="password" à text, et ainsi de suite.


Donc, si j'ai bien compris l'utilisation de one(), lors du premier focus, il n'y aurra pas de problème, mais si après vérification il y a une erreur, et que l'utilisateur prends le focus de ce champs de nouveau, cette fois-ci one() ne fonctionnera pas.


Alors, comme je disais, il y a toujours moyen de binder une one() dans ma fonction de vérification du password, mais ça veut dire re-binder un événement à chaque fois que je vérifie le contenu de mon input :/

Est-ce vraiment mieux de faire comme ça plutot que ce que j'utilise à l'heure actuelle ? (en espérant avoir été clair :mrgreen:)

la question de base à se poser serait plutot quelle est vraiment l'utilité de basculer de texte en password ...

Bah pour que le message d'erreur que je dois mettre a l’intérieur du champs s'affiche lisiblement et non pas "●●●●", je dois donc basculer le champs password vers un type text;
Comme je le disais, le cahier des charges m'impose d'afficher le message d'erreur dans le champ en question; par exemple "Champs Requis" ou "Password trop cours".

Et donc, le repasser en password pour que l'utilisateur puisse de nouveau entrer un mot de passe différent sans que la personne derière lui puisse le lire :)

Ce n'est certainement pas une bonne pratique d'indiquer un message d'erreur dans un champ à remplir...
Tu devrais utiliser les attributs HTML5 required / pattern / placeholder pour ça en prévoyant éventuellement un polyfill pour les versions obsolètes de IE.
Voir aussi : L'API HTML5 de contrainte de validation.

en effet ... ou afficher le message d'erreur dans un span accolé à ton input en utilisant next() de jquery ...
Mais en tout état de cause utiliser un input password pour afficher des messages est une erreur de conception

Je suis tout à fait conscient de ça, mais comme je disais, cahier des charges oblige :(
je ne suis pas le concepteur, je suis que développeur sur ce projet, et on ne m'a pas spécialement laisser le choix la dessus.

Alors, je vous suis tout à fait, personnellement j'aurais effectivement mis dans un span a coté, ce qui aurait largement simplifié mon script de vérification.
Mais malheureusement.... :cry:

Par contre je n'avais pas spécialement pensé à mettre le message d'erreur dans le placeholder, ça peut en effet être une solution. Mais est-il possible de changer la couleur du text du place holder ?
Ouais, par-ce qu'en plus de devoir afficher le message d'erreur dans l'input (et donc toute les galères d'enregistrer la valeur dans une variable, afficher le message, et réplacer la valeur au focus), il faut également que celui ci s'affiche en rouge :mouarf:
(ouais je sais, c'est une question tout à fait stupide que je vais d'ailleurs tout de suite allez chercher grace à mon ami, ne prenez pas en compte cette dernière question ^^)

mieux vaut alors placer un span au dessus de l'input password !
qui viendra masquer l'input

Bonsoir

Exemple fonctionnel en 1.8.3 et plus, mais Bovino à raison :

Code:

---

<input id="monInput" type="text" value="mot de passe">

---

Code:

---

1 2 3

$( "#monInput" ).on( "change", function(){ $( this ).prop( "type", "password" ); });

---

Je plussoie de nouveau, je sais bien que je n’utilise pas la bonne méthode:?

Je n'avais pas pensé du tout à la validation grâce au HTML5, il va falloir que je me penche dessus pour le prochain projet, mais ça à effectivement l'air très puissant et assez personnalisable, je garde ça sous le coude :)

J'aurai peut être même pu l'utiliser ici, mais bon, maintenant que j'ai fini tout mes scripts, pas envie de tout me retaper (et surtout, pas spécialement le temps avant la deadline ^^)

En tout cas, super !

Code:

---

$( this ).prop( "type", "password" );

---

fonctionne très bien, ne perds pas le focus et fait exactement ce que je voulais :ccool:

Merci beaucoup à tous,
Super réactivité et très bon conseils =)