Javascript: Как лучше всего прочитать сканер штрих-кодов?

Question

Я хотел бы иметь возможность сканировать штрих-коды с помощью ручного сканера и обрабатывать результаты с помощью Javascript.

Сканер штрих-кода работает практически как клавиатура. Он выводит данные сканированного/переведенного (штрих-кода->) данных (справа?). На самом деле мне просто нужно поймать выход и продолжить. Но как?

Вот некоторые псевдокод я хотел бы сделать работу:

$(document).on("scanButtonDown", "document", function(e) { 
    // get scanned content 
    var scannedProductId = this.getScannedContent(); 

    // get product 
    var product = getProductById(scannedProductId); 

    // add productname to list 
    $("#product_list").append("<li>" + product.name + "</li>"); 
}); 

• Любые идеи (рамки, плагины, фрагменты)?
• Любая рекомендация по сканированию штрих-кода (аппаратного обеспечения)?

Заранее благодарен!

Я нашел this и this хорошие вопросы, но я хотел бы получить дополнительную информацию об обработке. Просто для фокусировки текстового поля может быть недостаточно в моем случае.

Answer 1

Ваш псевдо-код не будет работать, потому что у вас нет доступа к сканеру для поиска событий, таких как scanButtonDown. Ваш единственный вариант - это HID-сканер, который ведет себя точно так же, как клавиатура. Чтобы отличить вход сканера от ввода с клавиатуры, вы можете выбрать два варианта: на основе таймера или префикса.

Таймер на основе

Сканер может ввести символы гораздо быстрее, чем пользователь может (разумно) с клавиатурой. Рассчитайте, как быстро принимаются нажатия клавиш, и буфера быстро вводится в переменную, чтобы перейти к вашей функции getProductsId. @Vitall написал reusable jQuery solution for catching barcode scanner input, вам просто нужно поймать onbarcodescanned событие.

префиксов на основе

Большинство сканеров может быть сконфигурирован в качестве префикса все отсканированные данные. Вы можете использовать префикс, чтобы начать перехватывать все входные данные, и как только вы получите свой штрих-код, вы прекратите перехватывать ввод.

Полное раскрытие информации: Я работаю консультантом Socket Mobile, Inc., который производит портативные сканеры.

Answer 2

Сканер штрих-кода работает практически как клавиатура.

Это зависит от модели. Каждый, который я использовал, работает точно так же, как клавиатура (по крайней мере, до компьютера).

Он выводит данные сканирования/перевода (штрих-код->) raw (справа?).

Он выводит коды ключей.

$(document).on("scanButtonDown" 

Вы, вероятно, хотите keypress, не scanButtonDown.

Посмотрите на объект события, чтобы определить нажатый «ключ».

Чтобы определить, когда весь код был отсканирован, вы можете получить ключ «конец данных» (возможно, пробел или возврат), или вам может потребоваться просто подсчитать, сколько символов вводится.

Answer 3

Я только начал работать над плагином, который обрабатывает сканирования штрих-кодов и сканирование кредитной карты (построен на JQuery):

https://github.com/ericuldall/jquery-pos

Простая реализация:

$(function(){ 
    $(document).pos(); 
    $(document).on('scan.pos.barcode', function(event){ 
     var barcode = event.code; 
     //handle your code here.... 
    }); 
}); 

До сих пор этот плагин тестируется только одним типом сканера и кодами, содержащими только цифры, но если у вас есть дополнительные требования, которые не работают с ним, я был бы счастлив приспособить его к вашим потребностям. Пожалуйста, проверьте страницу github и дайте ей вихрь. Взносы поощряются.

E

Answer 4

var txt = ""; 
 
function selectBarcode() { 
 
    if (txt != $("#focus").val()) { 
 
     setTimeout('use_rfid()', 1000); 
 
     txt = $("#focus").val(); 
 
    } 
 
    $("#focus").select(); 
 
    setTimeout('selectBarcode()', 1000); 
 
} 
 

 
$(document).ready(function() { 
 
    setTimeout(selectBarcode(),1000);  
 
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<input type="text" name="tag" id="focus" placeholder="Use handheld RFID scanner">

Answer 5

ОК, так вот как я это сделал. Я установил сканер, чтобы добавить префикс (в моем случае я использовал Ctrl + 2 или код ascii 002 (управляющий код), поэтому его не удалось легко ввести с клавиатуры) и ENTER ((не стесняйтесь измените это, чтобы использовать что-то вроде Ctrl + 3 или код ascii 003 после каждого сканирования штрих-кода, если ваши данные штрих-кода могут содержать данные). В jQuery я захватываю событие нажатия клавиши и просматриваю префикс. Затем я записываю все в строку, а затем запускаю пользовательское событие, которое может прослушивать мое приложение. Поскольку я предотвращаю событие нажатия клавиши, пользователь может находиться в текстовом поле и сканировать штрих-код, который может инициировать событие, не затрагивая ничего, что они делают.

Кроме того, каждый штрих-код имеет 1-значный префикс, который мы используем, для идентификации типа сканируемого штрих-кода. Примеры:

• E: Сотрудник Знак
• S: Супервайзер Знак
• I: Пункт номер

let barcodeRead = ''; 
let readingBarcode = false; 

let handleKeyPress = (e) => { 
    if (e.keyCode === 2) { 
     // Start of barcode 
     readingBarcode = true; 
     e.preventDefault(); 
     return; 
    } 

    if (readingBarcode) { 
     e.preventDefault(); 

     if (e.keyCode === 13) { // Enter 
      readingBarcode = false; 
      const evt = $.Event('barcodeScan'); 
      evt.state = { 
       type: barcodeRead.substr(0, 1), 
       code: barcodeRead.substr(1), 
      }; 
      $(window).trigger(evt); 
      barcodeRead = ''; 
      return; 
     } 

     // Append the next key to the end of the list 
     barcodeRead += e.key; 
    } 
} 

$(window).bind('keypress', handleKeyPress); 

Из-за этого префикса, теперь я могу определить тип штрих-кода , и посмотреть, следует ли его обрабатывать на этой странице. Пример:

$(window).bind('barcodeScan', (e) => { 
    if (e.state.type !== 'E') { 
     alert('Please scan your employee badge only!'); 
    } else { 
     $('#employee-badge').val(e.state.code); 
    } 
});