I have the following code to input the reading value of a barcode:
$(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>And it works well this way. But I wanted to hide the input, and I've done it in these two ways:
<input type="hidden" name="ColabAssid" class="scanner-input" id="ColabAssid" value="">
OR
<input style="display:none;" type="text" name="ColabAssid" class="scanner-input" id="ColabAssid" value="">
The problem is that in the two ways I put it above, the input no longer receives the value of the barcode reading.
How can I hide the input and still receive the barcode reading value?
I wrote an example using hidden input, hope it helps you!
To try the example just type something then press 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>