Changement de couleur de texte dans un input

Version imprimable

21/08/2013, 15h34
splif

Changement de couleur de texte dans un input

Salut à tous,
je suis à la recherche d'une personne qui pourrai m'aider à réaliser un changement de couleur dynamique de texte dans un input lorsque la valeur de l'input est supérieure à zéro. ( j'en ai toute une série a modifier )

c'est apparemment possible à faire mais je n'ai rien trouvé de concret.

Merci par avance pour votre aide :D
21/08/2013, 15h42
SpaceFrog

Code:

style.color

Citation:

Envoyé par SpaceFrog

Code:

style.color

lol je le savais cela :mouarf:

en fait j'ai trouvé cela : sur le onClick
Code:

1 2 3 4 5 6 7 8 <TD><INPUT type="text" id="gbi_2vtx" name="gbi_2vtx" size="1" onClick=" if (gbi_2vtx != 0) document.forms[0].gbi_2vtx.style.color = \'rgb(255, 0, 0)\'; if (gbi_2vtx > 0) document.forms[0].gbi_2vtx.style.color = \'rgb(0, 255, 0)\'; " value="';if(isset($_POST['gbi_2vtx'])){ echo $_POST['gbi_2vtx'];} else {echo'0';}echo'"></TD>
En fait avec ce code cela change la couleur quand on clique sur le champ
Et c'est pas ce que je désire et comme je suis une bille en javascript je ne sais pas comment faire pour garder la couleur d'origine si le champ est à 0 et lui changer la couleur si il est supérieur à 0
l'idéal serait de changer la couleur en fonction de la saisie

21/08/2013, 16h24
SpaceFrog

sur quel évènement ?
21/08/2013, 16h59
splif

Ben je sais pas trop genre en autocompletion si c'est possible ....
21/08/2013, 17h16
SpaceFrog

donc sur le keyup ? ou mouseup ?

http://jsfiddle.net/p6hqM/1/
21/08/2013, 21h55
splif

Re :)
Désolé de ne pas avoir répondu avant ( vie de famille oblige :) )
Ben sur le keyup ça me parait plutôt pas mal.:ccool:
Merci pour le script je vais l’adapter ( en fait c'était le contraire on passe en rouge si c'est supérieur à 0 ) je m'en débrouille :mouarf:
Merci bcp une fois de plus.
Puis ça me permet d'essayer de comprendre le script ( suis une bille en javascript ) :calim2:

Euh ... si je fais cela :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
<html>
 
<head>
  <title></title>
 
 
<SCRIPT language="Javascript">
 
 
function red(obj) {
    obj.style.color = (parseInt(obj.value, 10) < 1) ? 'red' : 'black';
}
 
document.getElementById('foo').addEventListener('keyup', function () {
    red(this)
})
document.getElementById('foo').addEventListener('mouseup', function () {
    red(this)
})
 
 
</SCRIPT>
 
 
</head>
 
<body>
 
 
 
 
<br><br><br>
 
<input type="text" value="" id="foo" />
 
</body>
 
</html>

ça ne fonctionne pas c'est normal ?

21/08/2013, 22h04
splif

ben oui il faut appeler la fonction peut être !! suis c..... d'ou l'interet de la question keyup ou mouseup !
22/08/2013, 12h15
splif

Salut 8-)

j'ai testé et trouvé pour l'implanter dans ma page :lol:

Merci une fois de plus.

Par contre si je fais F5 ( si je réactualise la page ) ben ça me fait sauter la couleur.

il y a moyen de pouvoir la conserver ?
22/08/2013, 12h45
vermine

Réactualiser une page lui rend ses paramètres par défaut. :?

Atteindre la (même) page par une soumission, une redirection ou un lien pourrait permettre de récupérer des valeurs et de construire la page selon ses valeurs. Cela dépend de plusieurs choses.
22/08/2013, 13h31
splif

Salut

Ben quand je dis réactualiser la page c'est une peu faut .... en fait je réactualise pas mais j'ai une structure de contrôle des champs en php donc je récupère les $_POST
et dans ce cas de figure ( si jamais j'ai une erreur ou un oubli ) ben la couleur rouge disparait et reviens donc à la couleur initiale
22/08/2013, 14h11
SpaceFrog

si tu remets la valeur dans l'input ...
mais que tu ne lances pas la fonction ...
elle n'est actuellement lancée que sur le keyup ou mouseup de ton input ....

lance le fonction red() sur le onload de la page ...