begin process at 2010 03 11 18:46:58
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Formulaire

 > SAISIE ET AFFICHAGE D'UNE COULEUR

SAISIE ET AFFICHAGE D'UNE COULEUR


 Information sur la source

Note :
Aucune note
Catégorie :Formulaire Niveau :Débutant Date de création :06/04/2005 Date de mise à jour :06/04/2005 13:19:51 Vu :2 981

Auteur : Endymion222

Ecrire un message privé
Commentaire sur cette source (8)
Ajouter un commentaire et/ou une note

 Description

Dans le cadre d'un formulaire HTML, vous devez demander à l'utilisateur de saisir une couleur en hexa (ex: FF00FF).
Afin de lui faciliter la tache, on va lui afficher en temps reel le résultat de sa saisie

Source

  • <html>
  • <head>
  • <title> Saisie de couleur</title>
  • </head>
  • <body>
  • <script language="Javascript">
  • // mise en place de la couleur
  • function setColor () {
  • var reg = /[0-9a-fA-F]{6}/
  • // verification: couleur valide?
  • if (reg.test(document.form.color.value))
  • document.getElementById('couleur').style.backgroundColor = document.form.color.value ;
  • // sinon fond blanc
  • else
  • document.getElementById('couleur').style.backgroundColor = 'FBFBFB' ;
  • }
  • // initialisation
  • setColor() ;
  • </script>
  • <form name="form">
  • <p id="couleur">
  • Couleur
  • <input onkeyup="setColor()" maxlength="6" type="text" name="color" size="5" value="EDAAAA"/>
  • </p>
  • </form>
  • </body>
  • </html>
<html>
 <head>
  <title> Saisie de couleur</title>
 </head>
 <body>
 
 
 	<script language="Javascript">
 	
 		// mise en place de la couleur
		function setColor ()  {			
		    var reg = /[0-9a-fA-F]{6}/
		    
		    // verification: couleur valide? 
			if (reg.test(document.form.color.value))
	  			document.getElementById('couleur').style.backgroundColor = document.form.color.value ;
	  			
	  		// sinon fond blanc
	  		else
	  			document.getElementById('couleur').style.backgroundColor = 'FBFBFB' ;
		} 
		
		// initialisation
		setColor() ;
  	</script>	
 
  	<form name="form">  
 		<p id="couleur"> 
 			Couleur 
 			<input onkeyup="setColor()" maxlength="6" type="text" name="color" size="5" value="EDAAAA"/>  
 		</p>
 	</form>
 
 </body>
</html>

 Conclusion

Voila...

C'est mon premier code, alors soyez indulgent ;-).
Testé uniquement sous IE, y a même beaucoup de chance que ca marche pas ailleurs à cause du style...


 Historique

06 avril 2005 13:19:51 :

 Sources du même auteur

DÉSELECTION D'UN BOUTON RADIO

 Sources de la même categorie

DÉSACTIVER UN BOUTON SUBMIT APRÈS ENVOI DU FORMULAIRE par SoftDeath
IMPLEMENTATION DE RANDOM PERSONNALISÉ par ousous
IMPLEMENTATION DE HASHTABLE par ousous
JAVASCRIPT.UTIL.ITERATOR par ousous
Source avec Zip Source avec une capture PALETTE DE COULEURS par titnome

Commentaires et avis

Commentaire de coucou747 le 06/04/2005 14:02:29

je n'ai pas pris le temps de lire tout ton code, mais ta reg_exp devrait plutot être ainsi :
/[0-9A-F]{6}/i

Commentaire de Endymion222 le 06/04/2005 15:53:51

Je l'avais ecrite comme ca, mais je me suis aperçu que les minuscules marchaient aussi...

Commentaire de Arto_8000 le 06/04/2005 22:23:18

Ton code est bien mais pour le rendre plus intéressant et plus accessible ( pour ceux qui ne connaisse pas le système hexadécimale ) tu aurais du inclure une fonction qui permet de passer d'un nombre en base 10 à un nombre en base hexadécimale (pour les couleurs). C'est pas si difficile voici comment :

function numberToHexa(num)
{
if (num > 255) return false
result = num%16
base = num/16
base = Math.ceil(base-result/16)
result = Hexa(result)
base = Hexa(base)
return base+""+result
}
function Hexa(number)
{
switch(number)
{
case 11: number = "A"
case 12: number = "B"
case 13: number = "C"
case 14: number = "D"
case 15: number = "E"
case 16: number = "F"
}
return number
}

Et pour le reste il suffit de coller se qu'il retourne en tenant compte que la première couleur est la couleur rouge, la deuxième verte et la troisième bleu . Ex : 323232 donnera une couleur ayant 50 de rouge, 50 de vert et 50 de bleu.

Commentaire de coucou747 le 07/04/2005 20:48:23

je ne vois toujours pas en quoi ma solition serait moins bonne...

Commentaire de Endymion222 le 08/04/2005 15:46:22

Pour répondre à coucou :
Ca se vaut, mais je suis parti du principe que si ca marchait avec des minuscules, pour contraindre l'utilisateur à saisir uniquement en majuscule??

Pour répondre à Arto :
Je veux bien, mais ta fonction marche avec un seul nombre.

Si tu n'en mets qu'une tu ne pourra pas distinguer
12 255 12
et
122 55 12
par exemple.

Tu vas ainsi être obligé de présenter 3 zones de saisie différentes.

Commentaire de coucou747 le 08/04/2005 22:33:21

/i sert à utiliser majuscules et minuscules... Mon expression régulière est équivalente, mais plus interessante car plus courte et donc, plus compréhensible (bien que la tienne ne soit pas compliquée...)

Commentaire de Arto_8000 le 08/04/2005 22:35:20

Ma fonction convertie un seul nombre ,mais tu n'as qu'à n'en faire une autre qui va l'utiliser trois fois, c'est pas sorcier de le faire à partir d'un seul input. Tu n'as qu'à faire un split.

Commentaire de Endymion222 le 13/04/2005 15:41:39

Mais alors tu fais comment pour distinguer les combinaisons de chiffres...

Je me repete:
12 255 12
et
122 55 12

S'ecrivent tous les 2: 1225512, du moins si tu mets un champs unique...


Merci Coucou.. J'avais raté ton /i ;-)

 Ajouter un commentaire




Nos sponsors


Appels d'offres

Sondage...

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,718 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales