OnKeydown OnKeyup par addEventListener
moon136
Messages postés
80
Statut
Membre
-
Pitet Messages postés 2845 Statut Membre -
Pitet Messages postés 2845 Statut Membre -
Bonjour,
je n'arrive pas a transformer mes onKeyDown="limiteur();" onKeyUp="limiteur() avec la methode addListener...
il y a 2 id au meme nom alors je ne sais pas comment faire avec document.getElementById("limiteur" ())..
merci
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
Salut,
Tu peux utiliser deux fois getElementById() ou mieux utiliser une variable intermédiaire :
Bonne journée,
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,
