हेल्लो दोस्तों, आज हम अपने इस आर्टिकल में HTML, CSS एवं Java script कोड के माध्यम से Caps Lock ON Detector का Source Code देंगे जिसे आप कॉपी करके किसी भी प्रकार से Use कर सकते है
Caps Lock ON Detector Demo
Caps Lock ON Detector का demo नीचे दिया गया है इसका Effect देखने के लिए text box में Caps Lock ON करके कुछ टाइप करे
Caps Lock ON Detector CSS Code
नीचे दिए गए CSS Code में आप text box,warning तथा text box में दिख रहे शब्द के style को change कर सकते है
warning के style को change करे
#warning{
display:none;
color:red
}
Caps Lock area के width एवं height को कम ज्यादा कर सकते है
input#Capslock {
height:100%;
width:100%;
}
नीचे दिए गए CSS Code से table के width एवं height को कम ज्यादा कर सकते है
table, th, td {
border-collapse: collapse;
width:500px;
height:250px;
}
इस कोड से हम text area को center में कर सकते है
table.center {
margin-left: auto;
margin-right: auto;
}
Caps Lock ON Detector HTML Code
नीचे दिए गए HTML Code में इनपुट area के text को कस्टमाइज कर सकते है तथा warning text को भी change कर सकते है
<table class="center">
<tr>
<th>
<input id="Capslock" value="Write Some Text Here..." style=" text-align:center;">
<p id="warning">WARNING! Caps lock is ON.</p>
</th>
</tr>
</table>
Caps Lock ON Detector Java Code
उपरोक्त दिए गए कोड में आपको नीचे दिए गए Java Code को Add करना है
<script>
var input = document.getElementById("Capslock");
var text = document.getElementById("warning");
input.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
text.style.display = "block";
} else {
text.style.display = "none"
}
});
</script>
Caps Lock ON Detector Source Code
यदि आप चाहे तो उपरोक्त सभी कोड को नीचे दिए गए Source कोड के नीचे दिए गए Copy Code बटन पर click करके कोड को कॉपी कर सकते है