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.


[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 class=”form-group”>
<input type=”password” class=”form-control” placeholder=”Password”>
<div id=”response” class=”form-group”>
<p>Caps lock is ON</p>
<div class=”form-group”>
<button type=”submit” class=”btn btn-primary”>Sign in</button>


CSS Code

margin-top: 50px;
width: 200px;
color: red;

JS Code

[code]$(document).ready(function() {
$(‘.form-control’).keypress(function(e) {
var c = String.fromCharCode(e.which);
if (c.toUpperCase() === c && c.toLowerCase() !== c && !e.shiftKey) {
} else {