OnKeydown OnKeyup par addEventListener

Fermé

moon136 Messages postés 71 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 17 avril 2018 - Modifié le 6 sept. 2017 à 16:51
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 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

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
7 sept. 2017 à 10:00

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,

Discussions similaires

Cannot read property 'addEventListener' of null

Problème fetch et addEventListener, impossible faire console.log

.properties

JavaScript Cannot read property

Discussions similaires

Newsletters