How to Display a Message Whenever CAPS LOCK is ON using Javascript

Hello guys, welcome again to KDJ Guru blog. This tutorial will guide you to make a form with caps lock is on of or text. If you are working with a login or registration form this snippet will be very helpful for better user experience.

HTML Code

<h3 class="container">Displays message whenever CAPS LOCK is ON</h3>
<div class="container-fluid content">
<form class="form-horizontal">
<div class="form-group">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<div id="response" class="form-group">
<p>Caps lock is ON</p>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</form>
</div>

CSS Code

.content{
margin-top: 50px;
width: 200px;
}p{
color: red;
}

JS Code

$(document).ready(function() {
$('#message').hide();
})
$('.form-control').keypress(function(e) {
var c = String.fromCharCode(e.which);
if (c.toUpperCase() === c && c.toLowerCase() !== c && !e.shiftKey) {
$('#response').show();
} else {
$('#response').hide();
}
});

About Post Author

Kavidu Jayakody

Kavidu Dilshan Jayakody is the founder and the author of KDJ Blog. He is a skilled web developer and graphic designer. In addition, he has earned his degree BSc (Hons) Computing, UK. He is working as a tutor of an institute and as a part-time blogger, he will help you all to make your problems solved.

kdjayakodypro@gmail.com

https://kdj.lk