Come è possibile rilevare a livello di codice quando il testo inserito viene riempito digitando sulla tastiera e quando viene riempito automaticamente dallo scanner di codici a barre?Rileva quando la casella di inserimento è riempita dalla tastiera e quando si utilizza il lettore di codici a barre.
risposta
Bene un codice a barre non viene attivato alcun evento chiave in modo che si possa fare qualcosa di simile:
$('#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');
}
}
});
A seconda di quando si desidera valutare questo, si consiglia di fare questo controllo non sul cambiamento, ma su submit o qualsiasi altra cosa
È possibile utilizzare un evento "onkeyup" su quella casella di input. Se l'evento è stato attivato, puoi chiamarlo "Input from Keyboard".
Ho scritto questa risposta, perché il mio scanner di codici a barre Motorola LS1203 ha generato un evento di pressione, quindi non posso usare la soluzione di Utkanos.
La mia soluzione è:
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);
}
};
Se è possibile impostare un prefisso per lo scanner di codici a barre I suggerisce questo (ho cambiato un po 'il codice 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 prefisso standard (tasto HOME) e il suffisso (tasto ENTER):
new BarcodeScanner();
...
$(document).on('barcode',function(e,str){
console.log(str);
});
Se avete bisogno di personalizzare il timeout, il suffisso, prefisso, min/max ascii Codice readed:
new BarcodeScanner({timeout: 600, prefixKeyCode: 36, suffixKeyCode: 13, minKeyCode: 32, maxKeyCode: 126});
si può provare seguente esempio, utilizzando jQuery Plugin https://plugins.jquery.com/scannerdetection/
La sua altamente configurabile, rivelatore dello scanner in base al tempo. Può essere utilizzato come soluzione per scanner di codici a barre basato su prefisso/postfix, basato sul tempo.
Esercitazione per l'utilizzo e le migliori pratiche, come pure discusso sui vari modelli di scanner di codici a barre e su come gestirli. 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'/>
Grazie. Hai reso la mia giornata. Proprio quello che stavo cercando. :) –
La soluzione da Vitall funziona bene solo se si dispone già colpito almeno una chiave. Se non lo fai, il primo carattere verrà ignorato (se (this._timeoutHandler) restituisce false e il char non verrà aggiunto).
Se si desidera avviare la scansione immediatamente è possibile utilizzare il seguente codice:
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 }
};
grazie. Ma come posso rilevare quando sono stati inseriti i codici a barre? L'evento 'onCange' aumenta solo quando l'elemento ha perso la messa a fuoco, ma ho bisogno di sapere il valore inserito immediatamente dopo l'inserimento. Posso fare il timer e controllare periodicamente il valore sul campo di testo, ma penso che sia una soluzione sbagliata. – MyTitle
Non hai menzionato nella tua domanda quando hai voluto controllare l'input, quindi ho pensato su change. Sì, penso che un timer sia probabilmente l'unico modo lì, a meno che l'applicazione del codice a barre non faccia scattare una specie di evento personalizzato quando manipola la pagina. – Utkanos