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

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

на textInput событие выступает как paste событие. Потом все данные штрих-кода. В моем случае я ищу штрих-коды UPC. The 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 (контрольный код), чтобы его нельзя было легко ввести с помощью клавиатуры), и 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);
    }
});

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

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

Он выводит отсканированные / переведенные (штрих-код- > номер) данные 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">