Menangani Event Ketika Menekan Enter Pada JQuery

Jquery merupakan pustaka JavaScript yang digunakan untuk memudahkan atau menyederhanakan client side scripting.

Kadangkala sebuah program mengirimkan data ketika user menekan tombol enter sebenarnya pada program tersebut menyediakan kode program yang khusus menangani event pada saat tombol enter ditekan. Pada artikel ini akan membahas cara bagaimana Jquery menangani event pada saat tombol enter di tekan.

Buka notepad dan ketikkan kode berikut:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body style="text-align: center">
  <h1>Event Key Press Pada JQuery</h1>
  <form>
    <input type="text" id="nama" placeholder="Input Nama">
  </form>
  <script>
  $(document).ready(function(){
    $("#nama").on("keypress", function(e){
      if(e.which == 13)
      {
        alert("Anda Menekan Tombol Enter.");
      }
    });
  });
  </script>
</body>
</html>

Apabila dijalankan dengan memasukkan nama pada text field kemudian tekan tombol enter pada keyboard program akan terlihat seperti gambar berikut:

Catatan: Jquery yang digunakan adalah file langsung dari Google CDN sehingga saya tidak perlu mengunduh file Jquery lagi. Penting jika anda menggunakan Google CDN pastikan anda sedang terkoneksi internet.

Demikian artikel sederhana saya kali ini apabila anda kesulitan silahkan tinggalkan pertanyaan anda pada komentar di bawah.

Categories:

1 comment: