JavaScript : Mendeteksi User Berhenti Mengetik

DailyBlog.id - Apakah kalian pernah melihat ketika menggunakan sosial media, lalu kalian melihat seperti teks "Sedang mengetik ..." saat mengetik pesan, lalu tiba-tiba teks tersebut tidak tampil? Maka seperti itu lah cara kerja yang akan dibahas di artikel kali ini.

Untuk mendeteksi user berhenti mengetik sangat lah mudah, dimana JavaScript mendeteksi adanya inputan melalui keyboard bisa menggunakan (keypress, keyup, and keydown), namun di artikel kali ini akan menggunakan keyup untuk mendeteksi ketikan dari user lalu menggunakan setTimeout agar bisa memberikan jeda antara kegiatan mengetik dan sudah tidak mengetik.

Semisal disini ada sebuah inputan yang berasal dari textarea

<textarea id="inputTeks" placeholder="Ketik teks terserah disini ..."></textarea>
<br/><br/>

Lalu untuk mengetahui apakah user sedang mengetik atau tidak, bisa menggunakan HTML yang ada di bawah ini.

<b>Status</b>:
<span id="statusTeks">-</span><br/>

<b>Yang diketik:</b>
<span id="hasilKetik">-</span>

Dan pada tahap ini, merupakan JavaScript yang mendeteksi apakah user sedang mengetik atau tidak.

<script type="text/javascript">
    window.onload = () =>
    {
        const inputTeks = document.getElementById('inputTeks');
        const statusTeks = document.getElementById('statusTeks');
        const hasilKetik  = document.getElementById('hasilKetik');

        let waktu;
        let timeoutKetik = 1500; // Waktu untuk jeda antara user sedang mengetik atau tidak

        const selesaiKetik = () =>
        {
            const valueTeks = inputTeks.value.trim();

            statusTeks.textContent = '-';
            hasilKetik.textContent = (valueTeks !== '') ? valueTeks : '-';

            // Fungsi ini merupakan fungsi untuk user sudah berhenti mengetik
        }

        inputTeks.addEventListener('keyup', () =>
        {
            if (waktu)
            {
                clearTimeout(waktu);
                waktu = null;
            }

            statusTeks.textContent = 'Sedang mengetik teks ...';
            waktu = setTimeout(selesaiKetik, timeoutKetik);
            
        });
    }
</script>

Untuk script lengkapnya, mungkin kalian bisa buat file dengan nama sedang-mengetik.html (contoh saja). Lalu kalian copy script yang ada di bawah ini.

sedang-mengetik.html

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript : Mendeteksi User Berhenti Mengetik</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <style>
            body {margin: 10px;padding: 10px;color: #222}
            span {display: block;color: #999;margin: 8px 0}
            textarea {
                padding: 12px;
                height: 200px;
                width: calc(100% - 24px);
                resize: none;
                border-radius: 8px;
                border: 1px solid #ccc;
                background: #fff;
                box-shadow: 0 0 4px inset #dedede;
                outline: none;
                margin-top: 8px
            }
        </style>
    </head>
    <body>
        <textarea id="inputTeks" placeholder="Ketik teks terserah disini ..."></textarea>
        <br/><br/>

        <b>Status</b>:
        <span id="statusTeks">-</span><br/>

        <b>Yang diketik:</b>
        <span id="hasilKetik">-</span>

        <script type="text/javascript">
            window.onload = () =>
            {
                const inputTeks = document.getElementById('inputTeks');
                const statusTeks = document.getElementById('statusTeks');
                const hasilKetik  = document.getElementById('hasilKetik');

                let waktu;
                let timeoutKetik = 1500; // Waktu untuk jeda antara user sedang mengetik atau tidak

                const selesaiKetik = () =>
                {
                    const valueTeks = inputTeks.value.trim();

                    statusTeks.textContent = '-';
                    hasilKetik.textContent = (valueTeks !== '') ? valueTeks : '-';

                    // Fungsi ini merupakan fungsi untuk user sudah berhenti mengetik
                }

                inputTeks.addEventListener('keyup', () =>
                {
                    if (waktu)
                    {
                        clearTimeout(waktu);
                        waktu = null;
                    }

                    statusTeks.textContent = 'Sedang mengetik teks ...';
                    waktu = setTimeout(selesaiKetik, timeoutKetik);
                });
            }
        </script>
    </body>
</html>

Nah itu lah cara bagaimana mendeteksi user berhenti mengetik atau tidak menggunakan JavaScript. Walaupun terlihat simple banget, namun itu sangat bermanfaat buat kedepannya. Apalagi jika kalian ingin membuat web chatting, mungkin kalian bisa menerapkan script yang ada di atas ini.

Mungkin cukup sekian artikel tutorial dari saya, semoga artikel yang saya berikan ini dapat bermanfaat bagi kalian semua. Jika saya ada salah pengetikan, saya mohon maaf. Sekian, dan terima kasih.

Selamat mencoba!...

JavaScript : Mendeteksi User Berhenti Mengetik

sedang-mengetik.html

Formulir Kontak