Tengo el siguiente código para ingresar el valor de lectura de un código de barras:
$(document).ready(function(){ $(".scanner-input").focus().on("input",function(){ let barcode = $(this).val(); }) }); .lnr { margin-top: 5%; font-size: 1000%; } <link href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="form" method="post" action=""> <input type="text" name="ColabAssid" class="scanner-input" id="ColabAssid" value=""> <button type="submit" class="btn btn-success btn-xl" onclick="inserir_assid();"> <i class="pe-7s-look lnr"></i></button> </form>Y funciona bien de esta manera. Pero quería ocultar la entrada, y lo hice de estas dos maneras:
<input type="hidden" name="ColabAssid" class="scanner-input" id="ColabAssid" value="">O
<input style="display:none;" type="text" name="ColabAssid" class="scanner-input" id="ColabAssid" value="">El problema es que en las dos formas que lo puse arriba, la entrada ya no recibe el valor de la lectura del código de barras.
¿Cómo puedo ocultar la entrada y seguir recibiendo el valor de lectura del código de barras?
Escribí un ejemplo usando entrada oculta, ¡espero que te ayude!
Para probar el ejemplo, simplemente escriba algo y luego presione Enter .
let $scannerInput = $(".scanner-input"); $(document).ready(function(){ $scannerInput.focus(); }); $(document).on('keydown', (ev) => { if (ev.ctrlKey || ev.altKey) return; // Ignore command-like keys if (ev.key == 'Enter') { console.log('Barcode result: ' + $scannerInput.val()) $scannerInput.val('') } else if (ev.key == 'Space') { // I think IE needs this $scannerInput.val($scannerInput.val() + ' '); } else if (ev.key.length == 1) { // A character not a key like F12 or Backspace $scannerInput.val($scannerInput.val() + ev.key); } }); .lnr { margin-top: 5%; font-size: 1000%; } <link href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="form" method="post" action=""> <input type="hidden" name="ColabAssid" class="scanner-input" id="ColabAssid" value=""> <button type="submit" class="btn btn-success btn-xl" onclick="inserir_assid();"> <i class="pe-7s-look lnr"></i></button> </form>