HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detect Capslock</title>
</head>
<body>
//this is the input area
<label class="label-button" >Email</label>
<input id="input" type="text" name="email">
//this is the error message
<p id="errormessage" style="display: none; color: red">
Oops, your email cannot contain any Uppercase!
</p>
<script src="scripts.js"></script>
</body>
</html>
This is the HTML code, I am not sure if I should have the inline CSS in the HTML code and still repeat it in the JavaScript code
JavaScript:
const input = document.getElementById("input");
const errMsg = document.getElementById("errormessage");
input.addEventListener("keyup", function(event) {
if (event.getModifierState("Capslock")) {
errMsg.style.display = "block"; //this line should show the error message when the capslock key is on.
errMsg.style.color = "red"; //this line shows the color the error message should be in
} else {
errMsg.style.display = "none"; //this shows how it should be when the capslock isn't on
errMsg.style.color = "none";
}
});
I have an HTML form with an email input field. I’m trying to show an error message in red when the CapsLock key is on, indicating that the email should not contain any uppercase letters. The error message should be hidden when CapsLock is off. The issue is that the error message isn’t displaying when CapsLock is on. Am I correctly using the event listener to detect CapsLock status, and should I duplicate the CSS in JavaScript for styling?