Handle Input Barcode Diakhiri Enter

Ketika bermain dengan barcode scanner, beberapa barcode scanner ketika selesai berhasil baca barcode langsung diakhiri dengan enter. Ini bermasalah ketika kita menyisipkan form hasil baca barcode ke input, sehingga otomatis form akan tersubmit. Pada kondisi ini, mungkin beberapa proses tidak menginginkan “enter” tersebut karena ingin melakukan beberapa proses seperti ajax ke server sebelum form disubmit.

Untuk menghandle input barcode yang diakhiri dengan enter ini. Kita baca “enter” code pada javascript yang biasa dikenal “keyCode” nya. Setelah dibaca, prevent atau jaga agar input tidak ter-enter dengan cara kode “e.preventDefault();”.

1
2
3
4
5
6
7
8
9
10
$(document).on('keypress','#barcode_sparepart_code',function(e){
    console.log('barcode_sparepart_code on keypress');

    if(e.keyCode==13){
        e.preventDefault();
    }

    // proses ajax atau proses lainnya
    //
});

Terlihat, handle pada kode if(e.keyCode == 13) adalah handle untuk si “enter” karena enter pada javascript keyCodenya 13. Lalu untuk mendapatkan keyCode ini, saya gunakan event “keypress” dengan ‘#barcode_sparepart_code’ adalah input dimana barcode berhasil dibaca.

Setelah itu, jalankan proses lainnya. Dengan handle ini, form pada input tidak akan tersubmit otomatis karena kita prevent kode seperti kode diatas.

Semoga ada manfaatnya yang lagi koding main dengan barcode scanner 🙂

Note:
Contoh artikel ini ada pada aplikasi bengkel yang saya buat. Untuk melihat contoh penggunaan ini pada POS aplikasi bengkel. Berikut adalah video nya 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: