changement couleur champ avec caractére restant

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
moon136
Messages : 51
Enregistré le : 12 août 2017, 15:00

changement couleur champ avec caractére restant

Message par moon136 » 14 août 2017, 10:50

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

Avatar du membre
Frosty
Messages : 123
Enregistré le : 20 juil. 2017, 13:23
Localisation : Grenoble

Re: changement couleur champ avec caractére restant

Message par Frosty » 14 août 2017, 11:24

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.

moon136
Messages : 51
Enregistré le : 12 août 2017, 15:00

Re: changement couleur champ avec caractére restant

Message par moon136 » 14 août 2017, 23:42

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

moon136
Messages : 51
Enregistré le : 12 août 2017, 15:00

Re: changement couleur champ avec caractére restant

Message par moon136 » 18 août 2017, 22:40

bonjour

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

Répondre