KDJ Guru

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

Read Time1 Minute, 2 Seconds

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();
}
});

0 0

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.
0 %
Happy
0 %
Sad
0 %
Excited
0 %
Angry
0 %
Surprise

1 thought on “How to Display a Message Whenever CAPS LOCK is ON using Javascript”

  1. Hello! I know this is somewhat off topic but I was wondering which blog
    platform are you using for this website? I’m getting fed up
    of WordPress because I’ve had problems with hackers and I’m
    looking at alternatives for another platform. I would be great if you could point
    me in the direction of a good platform.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top