2013-11-13 12 views
4

Предположим, что у меня есть два текстовых полей:Обнаружить вход сканера с помощью JQuery

<input type="text"id="resourceName" placeholder="Resource name"/> 
<input type="text" id="barCode" placeholder="barCode(EAN-13)"/> 

Чтобы заполнить этот текстовые поля, которые я использую штрих- сканер и клавиатура. Что мне нужно, это немного сложно, и я не знаю, как это сделать. Я не могу отличить, когда пользователь заполняет текстовые поля клавиатурой и когда со штрих-кодом. Мне нужно это, потому что я хочу реализовать что-то вроде: когда пользователь является usign barcode scanner, и если у нас нет сфокусированного текстового поля, я хочу сфокусировать текстовое поле штрих-кода и вставить это значение в это текстовое поле, а когда сфокусировано текстовое поле resourceName, сначала Я хочу сфокусировать текстовое поле barCode, а затем вставить это значение в это текстовое поле. Я не хочу, чтобы пользователь вставлял штрих-код в текстовое поле resourceName с помощью сканера штрих-кода. Проблема в том, что я не могу различать события, как пользователь заполняет текстовые поля?, Используя сканер штрих-кодов или используя клавиатуру. Любая помощь будет много было оценено

+0

Возможно, с кнопкой где-нибудь, где говорится «Начать сканирование», и когда щелкнули, правильное поле ввода сфокусировано, и они знают, что программа готова принять вход. –

+0

Вы можете захватить все нажатия клавиш для документа и, если они соответствуют формату штрих-кода, вы можете ввести их в правильное поле. Просто проверьте, что последние 13 нажатий клавиш были всеми цифрами, и если да, предположим, что это штрих-код. Это не идеально, но я думаю, что это лучшее, что вы получите. – Archer

+0

Большое спасибо, звучит хорошо ... –

ответ

1

Посмотрите на keypress события JQuery в

Bind это ваш поле ввода, и он будет предупреждать вас, когда пользователь использует их клавиатуру для ввода штрих-кода

Также, вы видели this question?

+0

Я сделал это, но ничего не сделал ... Этого недостаточно, чтобы сделать разницу ... Это главная проблема, с которой они имеют одно и то же событие нажатия клавиши. –

+0

@nicuJanga Вы видели этот вопрос: http://stackoverflow.com/questions/4621299/jquery-listening-for-automated-scanner-input-from-keyboard?rq=1 –

2

Переход от идеи я предложил в комментариях, я придумал это ...

var _keybuffer = ""; 

$(document).on("keyup", function(e) { 
    var code = e.keyCode || e.which; 
    _keybuffer += String.fromCharCode(code); 
    if (_keybuffer.length > 13) { 
     _keybuffer = _keybuffer.substr(_keybuffer.length - 13); 
    } 
    if (_keybuffer.length == 13) { 
     if (!isNaN(parseInt(_keybuffer))) { 
      barcodeEntered(_keybuffer); 
      _keybuffer = ""; 
     } 
    } 
}); 

function barcodeEntered(value) { 
    alert("You entered a barcode : " + value); 
} 

Он держит буфер последних 13 нажатых клавиш и если это просто цифры, то это предполагает, что это штрих-код и запускает функцию barcodeEntered. Это, очевидно, хак и предполагает, что нет причин, по которым кто-либо когда-либо набирал цифру из 13 цифр в другом месте страницы (но вы могли бы игнорировать нажатия клавиш, если определенные поля имели фокус и т. Д.)

Он захватывает все ключи нажимает на страницу, независимо от фокуса, поэтому он должен захватить вас при сканировании штрих-кода, даже если ничто не фокусируется.

+0

Большое спасибо, я попробую это. –

+0

Хорошо, но стреляет дважды? – Erdogan

+0

@ Erdogan Похоже, вы назначили обработчик дважды. – Archer

4

Посмотрите на GitHub jQuery-Scanner-Detection

NPM Package jQuery-Scanner-Detection

обнаружения JQuery Scanner это небольшой плагин для обнаружения, когда пользователь с помощью сканера (штрих-кодов, QR-код ...) вместо клавиатуры и вызвать конкретные обратные вызовы.

+0

неработающая ссылка:/.. –

+1

ссылка обновлена. Благодарю. – delkant

Смежные вопросы