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]

1 Comment

  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.

Write A Comment