Cara Membuat Notifikasi Caps Lock Aktif pada Inputan

Cara Membuat Notifikasi Caps Lock Aktif pada Inputan - Notifikasi pada halaman website merupakan sebuah informasi yang sangat berguna sekali bagi pengguna ketika sedang melakukan aktivitas di dalamnya. Bayangkan saja ketika tidak ada notifikasi atau informasi yang kurang jelas, tentu akan sangat membingungkan pengguna bukan ? Baik itu notifikasi secara spesifik pada elemen ataupun secara umum pada halaman websitenya.

Berbicara tentang sebuah notifikasi, saya ingin berbagi tutorial kepada kalian bagaimana cara membuat notifikasi sederhana pada sebuah elemen, yaitu notifikasi Caps Lock aktif. Seperti apa cara membuatnya ? Yuk, simak langkah - langkahnya berikut ini.

Notifikasi Caps Lock aktif akan saya terapkan pada sebuah elemen inputan, jadi nanti ketika user melakukan inputan kemudian menekan tombol Caps Lock akan muncul peringatan kalau Caps Lock sedang aktif. Silahkan kalian buat elemen inputan atau kalian bisa membuatnya dengan framework Bootstrap 4  seperti berikut.

    <!-- Style CSS -->
    <style>
       #warning {display:none;}
    </style>
    <!-- Form Input -->
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-4">
                <div class="card border-dark">
                    <div class="card-body">
                        <label for="">Password</label>
                        <div class="form-group">
                            <input type="password" id="input" class="form-control border-dark">
                        </div>
                        <div id="warning" class="alert alert-warning mb-0" role="alert">
                            <strong>PERINGATAN!</strong> Caps Lock aktif.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Selanjutnya, untuk membuat notifikasi bisa berfungsi kalian wajib mengetikan sintak javascript berikut.

    <!-- JS -->
    <script>
        var input   = document.getElementById("input");
        var warning = document.getElementById("warning");
        input.addEventListener("keyup", function(event) {
        if (event.getModifierState("CapsLock")) {
                warning.style.display = "block";
            } else {
                warning.style.display = "none"
            }
        });
    </script>

Dari sintak diatas terdapat metode getModifierState("CapsLock") yang fungsi utamanya adalah untuk mengembalikan nilai true atau akan mengaktifkan fungsinya ketika menekan tombol Caps Lock pada keyboard. Kemudian ada pengecekan jika tombol Caps Lock diklik maka akan muncul notifikasi peringatan Caps Lock aktif begitupun sebaliknya.

Cara Membuat Notifikasi Caps Lock Aktif pada Inputan

Baiklah, itu diatas adalah langkah - langkah Cara Membuat Notifikasi Caps Lock Aktif pada Inputan, cukup mudah dan sederhana. Sekian dan selamat mencoba

13 Februari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat