Cara Membuat Notifikasi Caps Lock Aktif pada Inputan

13/02/2020    Risman Hakim    206     Website

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

Javascript

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More