Ekranda Caps Lock Açık Yada Kapalı Uyarısı Gösterme
Javascript ile caps lock tuşunun açık yada kapalı olduğunu gösteren kodları paylaşacağım. Örneğin bir login ekranı yapıyorsunuz ve kullanıcılara caps lock tuşunun açık olduğunu gösteren bir uyarı yani anlık bildirim vermek istiyorsanız doğru yerdesiniz. Caps lock aktif mi değil mi kullanıcıya anlık bildirebileceksiniz.
Canlı Demo
KAYNAK KODLAR İÇİN
Aşağıdaki kaynak kodlar “Html + CSS + JS “ ile birlikte verilmiştir. Tümünü kopyalayıp “.html” şeklinde kayıt ettiğinizde hemen çalıştırabilirsiniz.
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<span>CapsLock Tuşuna Basın</span>
<input type="text" placeholder="Adınız" />
<div id="capslockKontrolID" style="display:none;">
<h3 style="color: black; background-color: white; border: 1px solid #fd0e0e; font-weight: bold; text-align: center; font-size: 16px; width: 22%; border-radius: 14px;">Caps Lock Açık.</h3>
</div>
<script type="text/javascript">
document.addEventListener("keyup", function (event) {
if(event.getModifierState && event.getModifierState('CapsLock')){
$("#capslockKontrolID").css("display", "block");
} else {
$("#capslockKontrolID").css("display", "none");
}
});
</script>
</body>
</html>
