Menu

OnKeydown OnKeyup par addEventListener

moon136 71 Messages postés samedi 12 août 2017Date d'inscription 17 avril 2018 Dernière intervention - 6 sept. 2017 à 16:48 - Dernière réponse : Pitet 2378 Messages postés lundi 11 février 2013Date d'inscription 2 février 2018 Dernière intervention
- 7 sept. 2017 à 10:00
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

Afficher la suite 

1 réponse

Répondre au sujet
Pitet 2378 Messages postés lundi 11 février 2013Date d'inscription 2 février 2018 Dernière intervention - 7 sept. 2017 à 10:00
0
Utile
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,
Commenter la réponse de Pitet