1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| <!DOCTYPE html>
<html lang="fr"> <!-- oninput.html -->
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>OnInput mieux que OnChange ?</title>
</head>
<body>
<input id="InText" placeholder="5 caractères minimum" oninput="VerifEnter(this)"> Avec oninput<br />
<input id="ChangeText" placeholder="5 caractères minimum" onchange="VerifEnter(this)"> Avec onchange<br />
<input id="KeypressText" placeholder="5 caractères minimum" onkeypress="VerifEnter(this)"> Avec onkeypress<br />
Evenement:<br />
<div id="result">
</div>
<script>
let ElemReponse = document.getElementById("result");
function VerifEnter(Elem){
//console.log(Elem.id);
//console.log("LeText.length = "+Elem.value.length);
ElemReponse.textContent = "Element conserné: " + Elem.id + ", Nbr. de caractères: " + Elem.value.length;
(Elem.value.length <=4) ? Elem.style.backgroundColor='Pink' : Elem.style.backgroundColor='white';
}
</script>
</body>
</html> |
Partager