Changement de couleur de texte dans un input

**splif** · 21/08/2013, 15h34

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

**SpaceFrog** · 21/08/2013, 15h42

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

style.color

**splif** · 21/08/2013, 16h09

Envoyé par SpaceFrog

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

style.color

lol je le savais cela

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 21/08/2013, 16h24

sur quel évènement ?

**splif** · 21/08/2013, 16h59

Ben je sais pas trop genre en autocompletion si c'est possible ....

**SpaceFrog** · 21/08/2013, 17h16

donc sur le keyup ? ou mouseup ?

http://jsfiddle.net/p6hqM/1/

**splif** · 21/08/2013, 21h55

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.

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

Merci bcp une fois de plus.
Puis ça me permet d'essayer de comprendre le script ( suis une bille en javascript )

**splif** · 21/08/2013, 22h01

Euh ... si je fais cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**splif** · 21/08/2013, 22h04

ben oui il faut appeler la fonction peut être !! suis c..... d'ou l'interet de la question keyup ou mouseup !

**splif** · 22/08/2013, 12h15

Salut

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

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 ?

**vermine** · 22/08/2013, 12h45

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.

**splif** · 22/08/2013, 13h31

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

**SpaceFrog** · 22/08/2013, 14h11

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 ...

Changement de couleur de texte dans un input

JavaScript

Discussions similaires

Partager

Partager