Retour visuel pour un formulaire

Version imprimable

10/12/2008, 21h36
enDev

Retour visuel pour un formulaire

Bonjour,

Dans le formulaire présent sur ma page HTML, je souhaite installer une information visuelle permettant à l'utilisateur de savoir quel champ il est actuellement en train de remplir. Cette fonction est implémentée avec Safari et Google Chrome et je trouve ça très pertinent. Plus de détails et un exemple ICI.

J'avoue que je n'ai pas tout compris et que je ne suis pas une star en Javascript. Alors ma question est de savoir comment entourer le champ actif d'un petit contour bleu (si possible simplement et pour tous les navigateurs). Si vous connaissez des scripts ou si vous avez des informations pour que j'avance, merci d'avance.

Laurent. ;)
11/12/2008, 01h12
eatherquake

Salut,

Alors pour reconnaitre le champ actif, il y a la fonction onfocus et pour changer le contour, il y a la propriété css border-color. Donc je pense que tu peux démarrer avec:

Code:

<input type="text" style="border:1px solid #000;" value="toto" onfocus="this.style.borderColor='blue';" onblur="this.style.borderColor='#000';"/>

le onblur, c'est pour remettre le champ dans l'état initial quand il perd le focus.
11/12/2008, 09h22
enDev

De manière générique

Bonjour,

Merci pour cette réponse et je vais effectivement commencer avec ça. Par contre, je pourrais avoir ce petit effet de "flou" ou de "contour doux" ?

Enfin, est-ce possible d'appliquer de manière générique cette propriété dès qu'un formulaire est détecté dans une de mes pages ? Sans que je sois obligé d'appliquer ce traitement à la main pour chaque élément de mon formulaire ? A travers un script par exemple ou autre. J'espère avoir été clair :oops:

Merci d'avance, Laurent.
11/12/2008, 09h24
marcha

Salut,

Tu peux aussi faire ça en CSS

input:focus { border: 1px solid red; }

Si tu as besoin de retrocompatibilité avec des vieux navigateurs il doit
exister des code pour émuler ça pour IE6
11/12/2008, 09h35
RomainVALERI

Citation:

Envoyé par enDev

Enfin, est-ce possible d'appliquer de manière générique cette propriété dès qu'un formulaire est détecté dans une de mes pages ? Sans que je sois obligé d'appliquer ce traitement à la main pour chaque élément de mon formulaire ? A travers un script par exemple ou autre.

L'idée est plutôt bonne, et pour une autre raison : ça te permettrait d'éviter l'inclusion des propriétés onfocus et onblur dans ton (x)html, qui ne sont pas recommandées (intrusion javascript)
On peut imaginer un script, inclus dans la balise <head> de ta page par un <link>, qui s'exécuterait au chargement de ta page (événement "load" de window ou body), rechercherait tous les éléments <form> de ta page, et appliquerait sur chacun une autre fonction, qui elle-même chercherait tous les <input> (sauf type hidden éventuellement) de ce <form>, et leur appliquerait les deux gestionnaires d'événements adaptés (un pour "focus" et un pour "blur")
Comme on dit : "Y'a plus qu'à !" :mrgreen:
11/12/2008, 09h58
eatherquake

Citation:

L'idée est plutôt bonne, et pour une autre raison : ça te permettrait d'éviter l'inclusion des propriétés onfocus et onblur dans ton (x)html, qui ne sont pas recommandées (intrusion javascript)

oui bien sur j'ai fait un exemple compact en 6 4 2 :aie:

Citation:

Enfin, est-ce possible d'appliquer de manière générique cette propriété dès qu'un formulaire est détecté dans une de mes pages ? Sans que je sois obligé d'appliquer ce traitement à la main pour chaque élément de mon formulaire ? A travers un script par exemple ou autre.

Le lien que tu fournis te permet de faire ça très simplement avec JQuery effectivement. Tu reprends l'exemple du type en remplaçant juste la propriete background par bordercolor sur tes input.

Citation:

Par contre, je pourrais avoir ce petit effet de "flou" ou de "contour doux"

En css2, je ne sais pas si c'est possible, mais pour css3 je sais que c'est possible:
http://designshack.developpez.com/tu...css3-bordures/
Par contre, ne t'attend pas à ce que le css3 soit implémenté sur tous les navigateurs avant un bout de temps...:(
12/12/2008, 20h03
enDev

Merci

Merci pour cette dernière solution, ça marche parfaitement avec les balises CSS3 (même si tous les navigateurs ne les supportent pas mais pas grave).

Laurent :P