javascript - radioshack - programa lector de codigo de barras

Detectar cuándo se rellena el cuadro de entrada con el teclado y cuándo con el escáner de código de barras

Question

¿Cómo puedo detectar mediante programación el ingreso de texto al escribir con el teclado y cuando se llena automáticamente con el escáner de código de barras?

Answer 1

Bueno, un código de barras no activará ningún evento clave para que puedas hacer algo como:

$(''#my_field'').on({
    keypress: function() { typed_into = true; },
    change: function() {
        if (typed_into) {
            alert(''type'');
            typed_into = false; //reset type listener
        } else {
            alert(''not type'');
        }
    }
});

Dependiendo de cuándo desea evaluar esto, puede querer hacer esta verificación no en el cambio sino en el envío, o lo que sea.

Answer 2

Escribí esta respuesta, porque mi escáner de código de barras Motorola LS1203 generó el evento de pulsación de tecla, por lo que no puedo usar la solución de Utkanos.

Mi solución es:

var BarcodeScanerEvents = function() {
     this.initialize.apply(this, arguments);
};

BarcodeScanerEvents.prototype = {
    initialize: function() {
       $(document).on({
          keyup: $.proxy(this._keyup, this)
       });
    },
    _timeoutHandler: 0,
    _inputString: '''',
    _keyup: function (e) {
        if (this._timeoutHandler) {
            clearTimeout(this._timeoutHandler);
            this._inputString += String.fromCharCode(e.which);
        } 

        this._timeoutHandler = setTimeout($.proxy(function () {
            if (this._inputString.length <= 3) {
                this._inputString = '''';
                return;
            }

            $(document).trigger(''onbarcodescaned'', this._inputString);

            this._inputString = '''';

        }, this), 20);
    }
};

Answer 3

Hola, tengo una solución alternativa para evaluar el resultado del escáner de códigos de barras sin usar jQuery, primero necesita ingresar un texto que tenga un enfoque en el momento en que funcione el escáner de códigos de barras.

<input id="input_resultado" type="text" />

El código en JavaScript es:

var elmInputScan = document.getElementById(''input_resultado'');           

elmInputScan.addEventListener(''keypress'', function (e){        
  clearInterval( timer_response );    
  timer_response = setTimeout( "onInputChange()", 10);
});    

Cuando el escáner de código de barras ingresa el texto, llama varias veces al evento de pulsación de tecla, pero solo me interesa el resultado final, por esta razón utilizo el temporizador. Eso es todo, puede procesar el valor en la función onInputChange.

function onInputChange() {    
  console.log( document.getElementById(''input_resultado'').value );
}

Answer 4

La solución de Vitall solo funciona bien si ya presionó al menos una tecla. Si no lo hace, el primer carácter será ignorado (si (this._timeoutHandler) devuelve falso y no se agregará el carácter).

Si desea comenzar a escanear inmediatamente, puede usar el siguiente código:

var BarcodeScanerEvents = function() {
 this.initialize.apply(this, arguments);
};

BarcodeScanerEvents.prototype = {
 initialize : function() {
  $(document).on({
   keyup : $.proxy(this._keyup, this)
  });
 },
 _timeoutHandler : 0,
 _inputString : '''',
 _keyup : function(e) {
  if (this._timeoutHandler) {
   clearTimeout(this._timeoutHandler);
  }
  this._inputString += String.fromCharCode(e.which);

  this._timeoutHandler = setTimeout($.proxy(function() {
   if (this._inputString.length <= 3) {
    this._inputString = '''';
    return;
   }

   $(document).trigger(''onbarcodescaned'', this._inputString);

   this._inputString = '''';

  }, this), 20);
 }
};

Answer 5

Puede usar un evento "onkeyup" en ese cuadro de entrada. Si el evento se ha activado, puede llamarlo "Entrada desde el teclado".

Answer 6

Si puede establecer un prefijo para su escáner de código de barras, sugiero esto (cambié un poco el código de Vitall):

var BarcodeScanner = function(options) {
     this.initialize.call(this, options);
};
BarcodeScanner.prototype = {
    initialize: function(options) {
       $.extend(this._options,options);
       if(this._options.debug) console.log("BarcodeScanner: Initializing");
       $(this._options.eventObj).on({
          keydown: $.proxy(this._keydown, this),
       });
    },
    destroy: function() {
        $(this._options.eventObj).off("keyup",null,this._keyup);
        $(this._options.eventObj).off("keydown",null,this._keydown);
    },
    fire: function(str){
        if(this._options.debug) console.log("BarcodeScanner: Firing barcode event with string: "+str);
        $(this._options.fireObj).trigger(''barcode'',[str]);
    },
    isReading: function(){
        return this._isReading;
    },
    checkEvent: function(e){
        return this._isReading || (this._options.isShiftPrefix?e.shiftKey:!e.shiftKey) && e.which==this._options.prefixCode;
    },
    _options: {timeout: 600, prefixCode: 36, suffixCode: 13, minCode: 32, maxCode: 126, isShiftPrefix: false, debug: false, eventObj: document, fireObj: document},
    _isReading: false,
    _timeoutHandler: false,
    _inputString: '''',
    _keydown: function (e) {
        if(this._input.call(this,e))
            return false;
    },
    _input: function (e) {
        if(this._isReading){
            if(e.which==this._options.suffixCode){
                //read end
                if(this._options.debug) console.log("BarcodeScanner: Read END");
                if (this._timeoutHandler) 
                    clearTimeout(this._timeoutHandler);
                this._isReading=false;
                this.fire.call(this,this._inputString);
                this._inputString='''';
            }else{
                //char reading
                if(this._options.debug) console.log("BarcodeScanner: Char reading "+(e.which));
                if(e.which>=this._options.minCode && e.which<=this._options.maxCode)
                    this._inputString += String.fromCharCode(e.which);
            }
            return true;
        }else{
            if((this._options.isShiftPrefix?e.shiftKey:!e.shiftKey) && e.which==this._options.prefixCode){
                //start reading
                if(this._options.debug) console.log("BarcodeScanner: Start reading");
                this._isReading=true;
                this._timeoutHandler = setTimeout($.proxy(function () {
                    //read timeout
                    if(this._options.debug) console.log("BarcodeScanner: Read timeout");
                    this._inputString='''';
                    this._isReading=false;
                    this._timeoutHandler=false;
                }, this), this._options.timeout);
                return true;
            }
        }
        return false;
    }
};

Si necesita personalizar el tiempo de espera, el sufijo, el prefijo, el código min / max ascii leído:

new BarcodeScanner({timeout: 600, prefixKeyCode: 36, suffixKeyCode: 13, minKeyCode: 32, maxKeyCode: 126});

También agregué la opción isShiftPrefix para usar, por ejemplo, $ char como prefijo con estas opciones: new BarcodeScanner({prefixKeyCode: 52, isShiftPrefix: true});

Este es un violín: https://jsfiddle.net/xmt76ca5/

Answer 7

puede probar el siguiente ejemplo, utilizando el complemento jQuery https://plugins.jquery.com/scannerdetection/

Es un detector de escáner basado en tiempo altamente configurable. Se puede utilizar como solución para el escáner de código de barras basado en prefijo / postfijo, basado en tiempo.

Tutorial sobre el uso y las mejores prácticas, así como sobre varios modelos de escáner de código de barras y cómo tratarlos. http://a.kabachnik.info/jquery-scannerdetection-tutorial.html

$(window).ready(function(){

 //$("#bCode").scannerDetection();

 console.log(''all is well'');
 
 $(window).scannerDetection();
 $(window).bind(''scannerDetectionComplete'',function(e,data){
            console.log(''complete ''+data.string);
            $("#bCode").val(data.string);
        })
        .bind(''scannerDetectionError'',function(e,data){
            console.log(''detection error ''+data.string);
        })
        .bind(''scannerDetectionReceive'',function(e,data){
            console.log(''Recieve'');
            console.log(data.evt.which);
        })

        //$(window).scannerDetection(''success'');

<input id=''bCode''type=''text'' value=''barcode appears here''/>

Answer 8

Adapta la súper útil respuesta Vitall anterior para utilizar un IIFE en lugar de prototipos, en caso de que alguien que esté viendo esto ahora esté interesado en eso.

Esto también usa el evento ''keypress'' en lugar de keyup, lo que me permitió usar KeyboardEvent.key de forma confiable, ya que KeyboardEvent.which está en desuso. Encontré que esto funciona para el escaneo de códigos de barras, así como para deslizar tarjetas de banda magnética.

En mi experiencia, el manejo de los swipes de las tarjetas con keyup me llevó a realizar un trabajo adicional en el manejo de los códigos ''Shift'', por ejemplo, un código Shift sería seguido por el código que representa ''/'', con el carácter deseado como ''?''. Usando ''keypress'' resolví esto también.

(function($) {
    var _timeoutHandler = 0,
        _inputString = '''',
        _onKeypress = function(e) {
            if (_timeoutHandler) {
                clearTimeout(_timeoutHandler);
            }
            _inputString += e.key;

            _timeoutHandler = setTimeout(function () {
                if (_inputString.length <= 3) {
                    _inputString = '''';
                    return;
                }
                $(e.target).trigger(''altdeviceinput'', _inputString);
                _inputString = '''';

            }, 20);
        };
    $(document).on({
        keypress: _onKeypress
    });
})($);

Answer 9

$(window).ready(function(){

 //$("#bCode").scannerDetection();

 console.log(''all is well'');
 
 $(window).scannerDetection();
 $(window).bind(''scannerDetectionComplete'',function(e,data){
            console.log(''complete ''+data.string);
            $("#bCode").val(data.string);
        })
        .bind(''scannerDetectionError'',function(e,data){
            console.log(''detection error ''+data.string);
        })
        .bind(''scannerDetectionReceive'',function(e,data){
            console.log(''Recieve'');
            console.log(data.evt.which);
        })

        //$(window).scannerDetection(''success'');

<input id=''bCode''type=''text'' value=''barcode appears here''/>