Fitur mendeteksi Capslock saat melakukan input pada form sangat dibutuhkan agar pengguna tidak melakukan kesalahan saat mengisi form. Dalam kasus ini saya akan membagikan tutorial mengenai Cara Mendeteksi Capslock Dengan Javascript dan Materialize. Fitur pendeteksi Capslock yang akan dibuat saya menggunakan inputan Materialize. Yuk langsung saja ikuti step-step pembuatanya seperti berikut ini: Langkah Pertama, silahkan sahabat membuka website Materialize kemudian copy link library css serta js seperti code dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cara Mendeteksi Capslock</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
Langkah Kedua, yaitu menambahkan struktur HTML berupa div class dan tag input seperti berikut ini:
<div class="container"> <h3>Cara Mendeteksi Capslock</h3> <div class="row"> <div class="col m6 s12"> <div class="input-field"> <input type="text" id="Caps"> <label for="">Input Text Here</label> </div> </div> </div> </div>
Bisa diperhatikan pada tag input berikan sebuah id=”Caps“, kemudian selanjutnya yaitu menbahkan script seperti berikut:
<script>
var caps = document.getElementById("Caps");
caps.addEventListener("keyup",capsDetector);
function capsDetector(e){
if(e.getModifierState("CapsLock")){
M.toast({
html:"Perhatian! Capslock Aktif",
classes:"orange"
})
}else{
}
}
</script>
Oke jika sudah langsung saja simpan kemudian buka pada browser lalu lihat hasilnya, apabila benar akan seperti tampilan dibawah ini:
Jadi saat keyboard Capslock di tekan maka akan menampilkan alert bahwa Capslock sedang aktif.
Demikian yang bisa saya sampaikan dalam artikel kali ini tentang Cara Mendeteksi Capslock Dengan Javascript dan Materialize. Semoga bermanfaat dan sampai jumpa di lain kesempatan.
terima kasih
The post Cara Mendeteksi Capslock Dengan Javascript dan Materialize appeared first on Kursus Website Terbaik.