Hey coders, today we will look through on how to detect caps lock in input fields using JavaScript. Do check out the video tutorial below:
You might wonder what is this project and where to use it. Basically, if you type any input in Caps Lock in this project output, it will warn you that caps lock is on. You can use this in many places but mainly in a login form where you would want the inputs to be only in small (lowercase) letters.
Here's the code for it:
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!DOCTYPE html>
<html>
<head>
<title>Caps lock Detection | CodingPorium</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
body {
display: flex;
font-family:poppins;
justify-content: center;
align-items: center;
background-color:mediumseagreen;
height: 600px;
}
.container{
background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
padding:16px;
}
#text {display:none;color:red}
input{
font-family:poppins;
width:150px;
transition:0.3s;
border-radius:5px;
border:none;
}
input:focus{
width:250px;
outline:none;
}
</style>
</head>
<body>
<div class="center">
<p><div class="container"><h3>Detect Caps Lock using Javascript</h3>
<p>Please do not enter input with CAPS LOCK.</p>
<input id="myInput" placeholder="Some text..">
<p id="text">WARNING! Caps lock is ON.</p></div></p>
</div>
<script>
var input = document.getElementById("myInput");
var text = document.getElementById("text");
input.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
text.style.display = "block";
} else {
text.style.display = "none"
}
});
</script>
</body>
</html>
Thanks for reading and I hope this article was useful. Till the next one,goodbye!
Post a Comment