Mendeteksi Tekan Tombol Enter dengan Jquery

Untuk kebutuhan dalam Web Programming terkadang kita butuh Code untuk mengetahui apakah tombol enter sudah di tekan atau belum.
Biasanya ini digunakan untuk Validasi dalam Form, atau proses input ke database setelah proses tombol Enter di Tekan.
Sebagai contoh silahkan coba masukan sembarang teks dalam Text Field dibawah ini lalu akhiri dengan menekan enter.

BARCODE : Tekan Enter




Ok, sekarang kita mulai bagaimana cara Mendeteksi Tekan Tombol Enter dengan Jquery
1. Pada Bagian <head> halaman web pastikan kode program sebagai berikut :
 <head>  
 <title>Deteksi Penekanan Tombol Enter Dengan Jquery</title>  
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
 <!--<script src="jquery-1.7.1.js"></script> --> <!-- ini untuk di localhost -->  
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
 <script>  
 $(document).ready(function(){  
      $('#barcode').on("keydown",function(event){  
           if(event.which==13){  
              alert("Tombol Enter Telah Di Tekan");  
                //Kode Lain Bisa di Dilanjut disini  
           }  
      });  
 });  
 </script>  
 </head>  

2. Lalu di pada Bagian <body> masukan kode sebagai berikut :
 <body>  
 <p><b><span style='font-size:14.0pt'><span style='font-size:20.0pt'>BARCODE :   
   <input type="text" id="barcode" name="barcode" size="30" maxlength="30">  
  </span>  
     Tekan Enter<br>  
 </span></b></p>  
 </body>  

3. Berikut baris kode lengkapnya :
 <html>  
 <head>  
 <title>Deteksi Penekanan Tombol Enter Dengan Jquery</title>  
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
 <!--<script src="jquery-1.7.1.js"></script> --> <!-- ini untuk di localhost -->  
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
 <script>  
 $(document).ready(function(){  
      $('#barcode').on("keydown",function(event){  
           if(event.which==13){  
              alert("Tombol Enter Telah Di Tekan");  
                //Kode Lain Bisa di Dilanjut disini  
           }  
      });  
 });  
 </script>  
 </head>  
 <body>  
 <p><b><span style='font-size:14.0pt'><span style='font-size:20.0pt'>BARCODE :   
   <input type="text" id="barcode" name="barcode" size="30" maxlength="30">  
  </span>  
     Tekan Enter<br>  
 </span></b></p>  
 </body>  
 </html>  

4. Kunci keberhasilan menggunakan kode ini adalah pada kesesuaian ID text field yaitu id="barcode" di kode HTML dan #barcode di kode Javascript.

Selamat Mencoba

0 Response to "Mendeteksi Tekan Tombol Enter dengan Jquery"

Post a Comment

Silahkan Komentar Yang Membangun. Komen SARA, Judi, Pornografi dan Melanggar Undang-Undang akan ditandai sebagai SPAM