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

После многих исследований и испытаний, что сработало лучше всего для меня, так это захват ввода со сканера штрих-кодов без фокусировки ввода формы. Слушайте события keydown и textInput.

Событие textInput действует как событие paste. Затем он имеет все данные штрих-кода. В моем случае я ищу штрих-коды UPC. e.preventDefault() предотвращает вставку данных штрих-кода в форму ввода:

document.addEventListener('textInput', function (e){
    if(e.data.length >= 6){
        console.log('IR scan textInput', e.data);
        e.preventDefault();
    }
});

Я протестировал это на Android 4.4 и 7.0 с помощью ИК-сканера CipherLab.

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

    let UPC = '';
    document.addEventListener("keydown", function(e) {
        const textInput = e.key || String.fromCharCode(e.keyCode);
        const targetName = e.target.localName;
        let newUPC = '';
        if (textInput && textInput.length === 1 && targetName !== 'input'){
            newUPC = UPC+textInput;

          if (newUPC.length >= 6) {
            console.log('barcode scanned:  ', newUPC);
          } 
       }
    }

Конечно, вместо того, чтобы проверять длину строки для определения сканирования, вы можете прослушать e.keyCode === 13 в прослушивателе событий keydown.

Не все ИК-сканеры запускают событие textInput. Если ваше устройство этого не делает, то вы можете проверить, не испускает ли оно что-то подобное с:

monitorEvents(document.body);

Нашел этот трюк мониторинга здесь: Как вы регистрируете все события, вызванные элементом в jQuery?

Хорошо, вот как я это сделал. Я настроил сканер, чтобы добавить префикс (в моем случае, я использовал Ctrl+2 или ASCII-код 002 (контрольный код), чтобы он не мог легко быть введены с помощью клавиатуры), и ввести, (не стесняйтесь, чтобы изменить это, чтобы использовать что-то вроде сочетание клавиш 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);
    }
});

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

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

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

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

$(document).on("scanButtonDown"

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

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

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

Я только начал работать над плагином, который обрабатывает сканирование штрих-кодов и сканирование кредитных карт (построен на 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

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">