How To

Cara Membuat Pendeteksi Caps Lock

Di bawah ini kita akan mempelajari cara mengetahui apakah capslock aktif di dalam kolom input dengan JavaScript.

Deteksi Caps Lock aktif

Contoh

<!DOCTYPE html>
<html>
<style>
#text {display:none;color:red}
</style>
<body>

<h3>Detect Caps Lock</h3>
<p>Tekan tombol "Caps Lock" di dalam kolom input untuk memicu fungsi tersebut.</p>

<input id="myInput" value="Some text..">
<p id="text">Caps Lock Aktif</p>

<script>
var input = document.getElementById("myInput");
var text = document.getElementById("text");
input.addEventListener("keyup", function(event) {

if (event.getModifierState("CapsLock")) {
    text.style.display = "block";
  } else {
    text.style.display = "none"
  }
});
</script>

</body>
</html>

Hanifah Nurbaeti

Share
Tags: formHow To