begin process at 2012 02 09 19:08:57
  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 :3 497

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

Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai
Source avec Zip Source avec une capture RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES par william voirol
Source avec Zip Source avec une capture PLUGIN JQUERY LISTE MODIFIABLE (COMBO) AUTOCOMPLÉTÉE par medkarim
GESTION DE NUMÉRO DE TÉLÉPHONE SIMPLE DANS FIREFOX7 par rotomtom
Source avec Zip Source avec une capture RECOMMANDER CETTE PAGE AVEC MAILTO, ACCENT ET RETOUR LIGNE D... par weabow

Commentaires et avis

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

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 administrateur CS

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 administrateur CS

/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


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
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 : 5,054 sec (4)

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