11548 sujets

JavaScript, DOM et API Web HTML5

[PISTE DE SOLUTION] Styliser un input "password"

Bonjour à tous,

J'étais en train de travailler sur un site Web et je me suis dit: "mais c'est dont ben laite, les petites «étoiles»!". Alors j'ai cherché pour les changer et je suis tombé sur ce topic >> http://forum.alsacreations.com/topic-2-21133-1-Personnaliser-input-type-password.html (le lire pour comprendre la suite Smiley smile )

Ca commence à faire un bout de temps, mais je ressort ça quand même XD

Donc, si ceux qui avaient participé à ce topic lisent ceci, est-ce que ça a finalement été effectué? Car je cherche aussi à changer un peu ( Smiley biggol ) le look de mon projet avec ça. Et pour faire ce que Cédric a dit, ça n'a pas l'air si compliqué mais ensuite, comment faire pour prendre en compte le copier-coller (y compris les raccourcis clavier), et backspace, le delete,... !?!

Merci de m'éclairer de vos fantastiques lumières! Smiley cligne

Cordialement,
FoxLeader
Modifié par FoxLeader (14 Mar 2008 - 15:45)
Bon, après presque deux semaines, personne n'a d'idées?
Modifié par FoxLeader (09 Mar 2008 - 00:05)
Bonjour à tous,

J'ai finalement eu une idée et je demande ici vos avis et conseils sur cette solution.

1. Au chargement de la page, Javascript ajoute les évènements OnFocus et OnBlur (décrits plus bas) sur les input déclarés par ID et applique des styles (pour que ce soit inobstrusif) du genre: 

input.password {
    font-size: 1px;
    letter-spacing: 5px;
    vertical-align: super;
    color: #fff; /*la même que la couleur de fond*/
    background-image: caractere.jpg; /*l'image du caractère qui va remplacer les étoiles/points habituels*/
    background-position: -50px; /*l'opposé de la largeur de l'image*/
}

Explications: la première partie (qui s'applique au texte) sert à le camoufler tout en permettant sa sélection (d'où le letter-spacing). La deuxième partie place l'image qui viendra remplacer les caractères. Celle-ci comporte une répétition du truc qui remplace d'un minimum de 10 fois, plus selon la situation. La distance entre les caractères est à syncroniser avec le letter-spacing.

2.OnFocus, on initialise une fonction qui "capture" les caractères entrés. À chaque fois, il compte le nombre de lettres dans l'input et place l'image de fond correctement. Ex: comme plus haut, une lettre prend 6px de large (1px + spacing de 5px), on tasse l'image de fond de +6px (vers la droite) pour chaque lettre.

3.C'est presque tout... ensuite, on arrête de vérifier les touches sur le OnBlur.

Et voià!
Totalement inobstrusif, fonctionnement assez simple (donc ça devrait être léger). Ça fonctionne avec le backspace, le copier-coller, le delete, ça ne nécessite pas de markup inutile (ex: input caché), personnalisation et implémentation facile, etc...

Avant de m'y mettre, vos avis? Je ne suis pas un pro du JS alors j'en ai besoin Smiley smile Si quiconque voulait m'aider aussi, ce serait apprécié Smiley cligne

Merci beaucoup et bonne journée!
FoxLeader
Modifié par FoxLeader (14 Mar 2008 - 16:04)
FoxLeader a écrit :

Totalement inobstrusif


Bah non. Comme toutes les astuces de masquage de texte et de remplacement par un background CSS, ce sera problématique pour les utilisateurs ayant par exemple désactivé la prise en compte des couleurs (le caractère par défaut ne faisant plus qu'un pixel et le backgroud ne s'affichant plus).

Est-ce vraiment bien nécessaire, hum ? Smiley cligne
Modifié par Laurent Denis (14 Mar 2008 - 16:15)
Nécéssaire? Non Smiley lol
C'est sûr que c'est acessoire, mais c'est quand même... utile.

Tu as raison, mais déjà que ceux ayant JavaScript désactivé sont rares (+/- 1%) et ceux utilisant des navigateurs textes encore plus rares, alors ceux ayant désactivé la prise en compte des couleurs, ça doit être encore plus rare... enfin je crois. Peu importe, ce côté serait au loisir du programmeur/codeur qui pourra choisir s'il l'utilise ou pas...

De mon côté, mon utilisation à laquelle que pense présentement exclue de toute façon déjà un certain nombre d'utilisateurs (nécessite JavaScript et un navigateur moderne (FF/Opera/IE7+, Safari devrait aussi fonctionner).

Donc "Peu obstrusif". C'est mieux, ça? Smiley biggol

Toujours ouvert à de l'aide, des opinions, suggestions, meilleures idées, etc... Smiley biggrin
Sujet clos
Aller à