jquery plugin สำหรับใช้ barcode scaner กับ web application HTML form input

วันนี้เจอปัญหาของ web application ตัวนึงซึ่งมี form รับ input เป็น Serial Barcode

ปกติอุปกรณ์ barcode scanner ทั่วไปจะแสกน serial เหมือน keyboard แล้วตามด้วยการกด "Enter" key stroke

ปัญหา 

ใน HTML web form

Serial No.

ถ้าพิมพ์อะไรในช่อง input  นี้แล้วกด Enter จะเป็นการ submit form นั้นทันที ถ้าในฟอร์มเราต้องกรอก input ข้อมูลอื่นด้วยหลายช่อง ทันทีที่แสกนบาร์โค้ดเสร็จจะเหมือนกด submit ทันทีทั้งที่ยังกรอกข้อมูลช่องอื่นไม่ครบ

Solved

แก้ด้วยการเขียน jquery plugin ป้องกัน form submit เวลาที่ยิงสแกน barcode

(function($){
    $.fn.acceptBarcode = function(barcodeClass){
        var canSubmit = false;

        this.submit(function(e){
            //e.preventDefault();
            return canSubmit;
        });

        this.find('input.' + barcodeClass).each(function(){
            console.log('accept barcode for ' + $(this).attr('name'))

            $(this).bind('keyup', function(e){
                var code = (e.keyCode? e.keyCode : e.which);
                if(code == 13){ // Enter key pressed.
                    canSubmit = false;
                    console.log('serial enter detected - disable form.submit()');
                }
            })

            $(this).bind('focus', function(){
                canSubmit = false;
                console.log('serial input focus - disable form.submit()');
            })

            $(this).bind('blur', function(){
                canSubmit = true;
                console.log('serial input blur - enable form.submit()');
            });
        });
    };
})(jQuery);

วิธีใช้งาน..

<input class="barcode" type="text" 

$(document).ready(function(){
    $('form').acceptBarcode('barcode');
});