Signaler

OnKeydown OnKeyup par addEventListener

Posez votre question moon136 34Messages postés samedi 12 août 2017Date d'inscription 21 octobre 2017 Dernière intervention - Dernière réponse le 7 sept. 2017 à 10:00 par Pitet
Bonjour,

je n'arrive pas a transformer mes onKeyDown="limiteur();" onKeyUp="limiteur() avec la methode addListener...


<!DOCTYPE html PUBLIC>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="champstyle.css">

<title>Couleur champ</title>
<script src="champok.js"></script>

<style>
.normal {
 background: white;
}
.warning {
 background: orange;
}
.lastletters {
 background: red;
}
</style>
</head>
<body>
<form name="formulaire" action="">
  <textarea id="texte" name="texte" cols="30" rows="5" onKeyDown="limiteur();" onKeyUp="limiteur();"></textarea>
  <br>
  <p id="msg" style="display:none;">Il vous reste
    <input type="text" id="saisie" name="saisie" size="3" maxlength="2" value="15" readonly />
  </p>
</form>
<div id="alerte" class="debut"></div>

</body>
</html>


function limiteur(){
    var maximum = 15;
    var champ = document.formulaire.texte;
    var indic = document.formulaire.saisie;
    var msg = document.getElementById("msg");
    var total = champ.value.length;
 var reste = maximum - total;
    if (total > maximum)
      champ.value = champ.value.substring(0, maximum);
    else
      indic.value = reste;
    if (total==0)
   msg.style.display ="none"
 else
   msg.style.display ="block"  
 
 ChangeColor(reste);     
  }
  
function ChangeColor (number){
 //alert(number);
 if(number<=15 && number>=8){
  document.getElementById("texte").className = "debut";
 }else if(number<8 && number>=4){
  document.getElementById("texte").className = "warning";
 }else if(number<4){
  document.getElementById("texte").className = "lastletters";
  
 }
}



il y a 2 id au meme nom alors je ne sais pas comment faire avec document.getElementById("limiteur" ())..

merci

Utile
+0
plus moins
Salut,

Tu peux utiliser deux fois getElementById() ou mieux utiliser une variable intermédiaire :
// avec 2 getElementById() 
document.getElementById('texte').addEventListener('keydown', limiteur);
document.getElementById('texte').addEventListener('keyup', limiteur);

// avec une variable intermédiaire
var elementTexte = document.getElementById('texte');
elementTexte.addEventListener('keydown', limiteur);
elementTexte.addEventListener('keyup', limiteur);


Bonne journée,
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !