Caps lock indicator is one of the important thing to the user at the time of filling the forms, Mainly this will be useful to password field, when user fills the password they should note all the things some cases the user don't know whether the caps lock is on/off, so this script shows the message when the capslock is on. so user aware about caps lock.
The below example done by using Javascript, jquery and css, Here is the full source code and demo page, visit those pages for the live result of this program. I hope this post is helpful.
The below example done by using Javascript, jquery and css, Here is the full source code and demo page, visit those pages for the live result of this program. I hope this post is helpful.
Code for Caps lock on/off indicator
<html>
<head>
<title>Caps lock on/off indicator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function capLock(e){
kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
document.getElementById('divMayus').style.visibility = 'visible';
else
document.getElementById('divMayus').style.visibility = 'hidden';
}
</script>
<style>
input{
height: 35px;
border: 1px solid #7A7A7A;
border-radius: 2px;
width:250px;
padding:10px;
}
</style>
</head>
<body>
<h1>How to set Caps lock on/off indicator to Password field using javascript</h1>
<SPAN><input type="password" name="txtPassword" onkeypress="capLock(event)" />
<SPAN><div id="divMayus" style="visibility:hidden;margin-top:15px;color:red;">Caps Lock is on.</div>
<H1><a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></H1>
</body>
</html>
<head>
<title>Caps lock on/off indicator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function capLock(e){
kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
document.getElementById('divMayus').style.visibility = 'visible';
else
document.getElementById('divMayus').style.visibility = 'hidden';
}
</script>
<style>
input{
height: 35px;
border: 1px solid #7A7A7A;
border-radius: 2px;
width:250px;
padding:10px;
}
</style>
</head>
<body>
<h1>How to set Caps lock on/off indicator to Password field using javascript</h1>
<SPAN><input type="password" name="txtPassword" onkeypress="capLock(event)" />
<SPAN><div id="divMayus" style="visibility:hidden;margin-top:15px;color:red;">Caps Lock is on.</div>
<H1><a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></H1>
</body>
</html>
0 Comments