Hello guys in this tutorial we will create Caps Lock Detector using html css and JavaScript
How do you detect caps lock?
To check if the caps lock is on, you use the getModifierState() method of the KeyboardEvent object: const capslockIsOn = event. getModifierState(modifier); The getModifierState() method returns true if a modifier is active; otherwise, it returns false
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Caps Lock detector</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="form-row">
<form method="post">
<div class="field">
<input type="text" name="name" placeholder="Enter Text Here...">
<span id="caps-message">Caps Lock is on!</span>
</div>
</form>
</div>
<script type="text/javascript">
const CapsMessage = document.querySelector("#caps-message");
window.addEventListener("keyup", event => {
if (event.getModifierState("CapsLock")) {
CapsMessage.style.display = "block";
}else {
CapsMessage.style.display = "none";
}
});
</script>
</body>
</html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
Top comments (3)
Please do not put a sample of the article and then put a "Read More" link. DEV is a community, not a marketing platform. If you want SEO for your site, you can use the canonical URL and it will set that in the meta tags.
important details thank you very much for sharing
How to do same with jQuery ?