Javascript

Js ile caps lock kontrolü

JS caps lock tuşu açık / kapalı durumunu belirtme

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>

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu