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