ปกติอุปกรณ์ barcode scanner ทั่วไปจะแสกน serial เหมือน keyboard แล้วตามด้วยการกด "Enter" key stroke
ปัญหา
ใน HTML web formถ้าพิมพ์อะไรในช่อง 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');
});
