Event keyboard

Persiapkan HTML

Buatlah elemen HTML sederhana untuk menangkap event keyboard. Misalnya:

<!DOCTYPE html>
<html>
<head>
    <title>Event Keyboard jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="inputField">
    <p id="result"></p>
    <script src="script.js"></script>
</body>
</html>

Tambahkan JavaScript

Buat file script.js dan tambahkan kode jQuery berikut

$(document).ready(function() {
    // Tangkap event keyup pada elemen input
    $('#inputField').keyup(function(event) {
        // Cek jika tombol Enter (kode 13) ditekan
        if (event.keyCode === 13) {
            var inputValue = $('#inputField').val();
            $('#result').text('Anda mengetik: ' + inputValue);
        }
    });
});

Jalankan

Simpan file HTML dan script.js, lalu buka file HTML di browser. Ketika Anda mengetik di input field, tekan tombol Enter, dan Anda akan melihat hasilnya ditampilkan di elemen dengan id "result".

Dalam contoh ini, kita menggunakan event keyup untuk menangkap input dari keyboard. Ketika tombol Enter (kode 13) ditekan, kita mengambil nilai dari input field dan menampilkannya di elemen "result".

Anda dapat mengganti kode ini sesuai dengan kebutuhan Anda untuk menangani event keyboard lainnya seperti keydown, keypress, atau mengganti aksi yang ingin dilakukan saat tombol keyboard tertentu ditekan.

PREVIOUS
NEXT