Skip to content
Commits on Source (6)
...@@ -7,3 +7,8 @@ document.querySelectorAll("input[data-my]") ...@@ -7,3 +7,8 @@ document.querySelectorAll("input[data-my]")
evt.target.nextElementSibling.classList.add("hide"); evt.target.nextElementSibling.classList.add("hide");
}); });
}); });
document.querySelector("form")
.addEventListener("submit", evt => {
alert("Votre formulaire est faux !");
evt.preventDefault();
})
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exo GE 05</title>
<link rel="stylesheet" href="./style.css">
<script src="./index.js" defer></script>
</head>
<body>
<form action="#">
<input type="text">
</form>
</body>
</html>
document.querySelector("input")
.addEventListener("keydown", evt => {
if (!evt.getModifierState(evt.key)) {
console.log(evt.key);
}
});
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exo GE 06</title>
<link rel="stylesheet" href="./style.css">
<script src="./index.js" defer></script>
</head>
<body>
<form action="#">
<input type="text">
<div>Voici ce que vous avez tapé au clavier :</div>
<div id="out"></div>
</form>
</body>
</html>
// On utilise keyup pour avoir le contenu complet de l'input, y compris la lettre saisie
// De plus les touches de suppression de contenu sont capturée, ce qui répond
// à l'exercice 7
document.querySelector("input")
.addEventListener("keyup", evt => {
out.textContent = evt.target.value;
});
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exo GE 08</title>
<link rel="stylesheet" href="./style.css">
<script src="./index.js" defer></script>
</head>
<body>
<form action="#">
<input type="text">
</form>
</body>
</html>
document.querySelector("input")
.addEventListener("keyup", evt => {
if (evt.target.value === "Bonjour") {
evt.target.classList.remove("error");
evt.target.classList.add("ok");
} else {
evt.target.classList.add("error");
evt.target.classList.remove("ok");
}
});
.error {
background-color: red;
}
.ok {
background-color: green;
}