¿Cómo puedo detectar mediante programación cuando la entrada de texto se completa escribiendo en el teclado y cuando se llena automáticamente con un escáner de código de barras?Detecta cuando el cuadro de entrada se llena con el teclado y cuando se utiliza un escáner de código de barras.
bien un código de barras, dejará de eventos clave por lo que podría 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 cuando se quiere evaluar esto, es posible que desee hacer esta comprobación no en el cambio, pero en enviar , o lo que sea.
Puede usar un evento "onkeyup" en ese cuadro de entrada. Si el evento se ha activado, puede llamarlo "Entrada desde el teclado".
Escribí esta respuesta, porque mi Barcode Scanner Motorola LS1203 generó un 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);
}
};
Si se puede establecer un prefijo a su escáner de código de barras que sugiere esto (he cambiado un poco el código Vitall):
var BarcodeScanner = function(options) {
this.initialize.call(this, options);
};
BarcodeScanner.prototype = {
initialize: function(options) {
$.extend(this._options,options);
$(document).on({
keyup: $.proxy(this._keyup, this)
});
},
fire: function(str){
$(document).trigger('barcode',str);
},
_options: {timeout: 600, prefixKeyCode: 36, suffixKeyCode: 13, minKeyCode: 32, maxKeyCode: 126},
_isReading: false,
_timeoutHandler: false,
_inputString: '',
_keyup: function (e) {
if(this._isReading){
if(e.keyCode==this._options.suffixKeyCode){
//read end
if (this._timeoutHandler)
clearTimeout(this._timeoutHandler);
this._isReading=false;
this.fire.call(this,this._inputString);
this._inputString='';
}else{
//char reading
if(e.which>=this._options.minKeyCode && e.which<=this._options.maxKeyCode)
this._inputString += String.fromCharCode(e.which);
}
}else{
if(e.keyCode==this._options.prefixKeyCode){
//start reading
this._isReading=true;
this._timeoutHandler = setTimeout($.proxy(function() {
//read timeout
this._inputString='';
this._isReading=false;
this._timeoutHandler=false;
}, this), this._options.timeout);
}
}
}
};
uso con prefijo estándar (tecla HOME) y el sufijo (ENTER):
new BarcodeScanner();
...
$(document).on('barcode',function(e,str){
console.log(str);
});
Si necesita personalizar el tiempo de espera, el sufijo, prefijo, min/max ascii código readed:
new BarcodeScanner({timeout: 600, prefixKeyCode: 36, suffixKeyCode: 13, minKeyCode: 32, maxKeyCode: 126});
puede probar siguiente ejemplo, usando jQuery plugin de https://plugins.jquery.com/scannerdetection/
Su detector altamente configurable, tiempo basado escáner. Se puede usar como solución para el escáner de código de barras basado en el tiempo basado en el prefijo/postfijo.
Tutorial de uso y mejores prácticas, así como sobre diversos modelos de escáneres de códigos de barras y cómo solucionarlos. http://a.kabachnik.info/jquery-scannerdetection-tutorial.html
$(window).ready(function(){
\t //$("#bCode").scannerDetection();
\t console.log('all is well');
\t
\t $(window).scannerDetection();
\t $(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'/>Gracias. Me has alegrado el día. Justo lo que estaba buscando. :) –
La solución de Vitall sólo funciona bien si ya golpeado al menos una clave. Si no lo haces, se ignorará el primer carácter (if (this._timeoutHandler) devuelve falso y el carácter no se agregará).
Si desea empezar a escanear inmediatamente se puede utilizar el siguiente código:
var BarcodeScanerEvents = function() {
\t this.initialize.apply(this, arguments);
};
BarcodeScanerEvents.prototype = {
\t initialize : function() {
\t \t $(document).on({
\t \t \t keyup : $.proxy(this._keyup, this)
\t \t });
\t },
\t _timeoutHandler : 0,
\t _inputString : '',
\t _keyup : function(e) {
\t \t if (this._timeoutHandler) {
\t \t \t clearTimeout(this._timeoutHandler);
\t \t }
\t \t this._inputString += String.fromCharCode(e.which);
\t \t this._timeoutHandler = setTimeout($.proxy(function() {
\t \t \t if (this._inputString.length <= 3) {
\t \t \t \t this._inputString = '';
\t \t \t \t return;
\t \t \t }
\t \t \t $(document).trigger('onbarcodescaned', this._inputString);
\t \t \t this._inputString = '';
\t \t }, this), 20);
\t }
};
gracias. Pero, ¿cómo puedo detectar cuándo se introdujeron los códigos de barras? El evento 'onCange' se levanta solo cuando el elemento pierde el foco, pero necesito saber el valor insertado inmediatamente después de insertarlo. Puedo hacer un temporizador y verificar periódicamente el valor en el campo de texto, pero creo que es una solución incorrecta. – MyTitle
No mencionó en su pregunta cuándo exactamente quería verificar la entrada, así que asumí onChange. Sí, creo que un temporizador es probablemente la única forma de hacerlo, a menos que la aplicación de código de barras dispare algún tipo de evento personalizado cuando manipula la página. – Utkanos