Remplir input dynamiquement

Résolu/Fermé

skflers61 Messages postés 43 Date d'inscription jeudi 15 novembre 2007 Statut Membre Dernière intervention 21 novembre 2014 - 23 avril 2014 à 08:18
Utilisateur anonyme - 23 avril 2014 à 09:08

Bonjour,

j'ai un petit problème que je n'arrive pas à résoudre.
J'ai un formulaire avec des input de type texte dans lesquels je met des valeurs de mesure (donc des nombre).
Je voudrais que le input change de couleur (le background) en fonction de la valeur qu'il contient.
Le problème c'est que je veux faire ça dynamiquement, donc sans bouton valider.

Je ne sais pas si je dois faire ça en css, javascript(jquery), ajax ou autre chose.

Merci pour vos réponse.

A voir également:

Remplir input dynamiquement
Organigramme a remplir word - Guide
Remplir et signer pdf - Guide
Excel remplir automatiquement une cellule en fonction d'une autre ✓ - Forum Excel
Input signal out of range - Forum Ecran
Input signal not found ✓ - Forum Matériel & Système

2 réponses

Réponse 1 / 2

Utilisateur anonyme
23 avril 2014 à 09:08

Bonjour

Il te faut d'abord déclencher un appel à une fonction quand ton champ est modifié. L'événement onchange peut convenir, mais n'est pas appelé à chaque frappe de touche : onkeyup est peut-être préférable, ça dépend de ce que tu veux faire.
Cette fonction Javascript va récupérer la valeur du champ, l'analyser et mettre la couleur de fond en fonction du résultat.

Voici un exemple très simple :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>test</title>
<script type = "text/javascript">
  function couleurfond(objet) {
    x=parseInt(objet.value);
    if (isNaN(x)) return ;// pas un nombre, on ignore
    if (x<25) { objet.style.backgroundColor="#FFFFCC"; return; }
    objet.style.backgroundColor="#CCFFFF"; // par défaut
  }
</script>
</head>
<body>

<input type="text" name="valeur" id="valeur" onkeyup="couleurfond(this);"/>
</body>

</html>

Réponse 2 / 2

astuces72 Messages postés 7722 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 17 avril 2024 1 637
Modifié par astuces72 le 23/04/2014 à 09:03

slt

tu as ça:
https://jscolor.com/
et avec quelques modif tu devrais arriver à ce que tu veux !

ah pardon, j'avais mal lu, et tu veux une couleur en fonction d'un chiffre !
utilise les codes couleur en décimal.

----------------------------
Ça marche toujours avant la panne, donc cette phrase: "Il marchait bien avant" ne devrait pas exister.

Discussions similaires

input signal out of range

code couleur associé a une image

No video input après mise en veille

No video input

ecran pc noir "input not supported"

Discussions similaires

Newsletters