Page 1 sur 1

changement couleur champ avec caractére restant

Posté : 14 août 2017, 10:50
par moon136
Bonjour

Je cherche comment changer la couleur de mon champ :
Lorsqu'il ne reste plus que 7 caractères possibles, le champ devient orange.

Lorsqu'il ne reste plus que 3 caractères possibles, le champ devient rouge.

Code : Tout sélectionner

function limiteur()
    {
    maximum = 15;
    champ = document.formulaire.texte;
    indic = document.formulaire.indicateur;

    if (champ.value.length > maximum)
      champ.value = champ.value.substring(0, maximum);
    else
      indic.value = maximum - champ.value.length;
    }
    

Code : Tout sélectionner



<!DOCTYPE html PUBLIC>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="champstyle.css">
<head>
<title>couleurchamp</title>
<script src = "limite.js"></script>


</head>
<form name="formulaire" action="">
  <textarea name="texte" cols="30" rows="5" onKeyDown="limiteur();" onKeyUp="limiteur();"></textarea>
  <br>
  Il vous reste <input readonly type=text name="indicateur" size="3" maxlength=3 value="15"> caractères.
</form>


merci à vous

Re: changement couleur champ avec caractére restant

Posté : 14 août 2017, 11:24
par Frosty
Bonjour,

Dans ta fonction limiteur() tu peux rajouter les "if" qui vont bien pour faire des actions selon le nombre de caractères restants.

Tu veux que la bordure change de couleur, le fond ?... Pour plus de souplesse sur les éléments de style que tu veux modifier, tu peux effectuer des rajouts/suppressions de classes CSS dans les "if", comme proposé ici : https://stackoverflow.com/a/5782903/488666

En adaptant à ton cas ça donne quelque chose du genre

Code : Tout sélectionner

// réinitialisation des classes spéciales
champ.className = champ.className.replace(" warning1", "").replace(" warning2", "");
if (... plus que 7 caractères ...) {
  champ.className = champ.className + " warning1";
} else if (... plus que 3 caractères ...) {
  champ.className = champ.className + " warning2";
}
Il ne reste plus qu'à créer les classes CSS .warning1 et .warning2 avec tous les changements de style que tu veux, modifiables à souhait sans avoir besoin de retoucher au JS.

Re: changement couleur champ avec caractére restant

Posté : 14 août 2017, 23:42
par moon136
merci Frosty pour ton aide

je n'ai pas encore réussi car mon decompte ne marche plus aprés . je suis en train de voir, je te dirais si je reussi

Re: changement couleur champ avec caractére restant

Posté : 18 août 2017, 22:40
par moon136
bonjour

juste pour dire que le probleme est bien resolu! merci frosty ;)