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

[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>

[/code]

CSS Code

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

JS Code

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

[/code]