Hide the input and still receive the value

Question

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?

Scanners typically act like keyboards. Inputs typically need focus to receive input. — Ouroborus, Aug 04 '22 at 16:40
@Ouroborus Yes and I need that focus to receive input, but I intended it to be hidden. No way to do this? — Bruno, Aug 04 '22 at 16:42
`opacity: 0` possibly. Makes the element transparent, so you can't see it but it's still there and still occupies space. One of the problems will be that if the input loses focus for any reason, it may be difficult to get it back if you can't see the input. — Ouroborus, Aug 04 '22 at 16:45
I think it can help you https://stackoverflow.com/questions/67116377/javascript-hidden-input-barcode-scanner — Briuor, Aug 04 '22 at 16:48
@Briuor I saw the example you posted but I couldn't get it to work, can you help? — Bruno, Aug 04 '22 at 17:02
@Junior I wrote an example using the link i posted as an answer for your question, hope it helps, feel free to ask any questions about the solution. — Briuor, Aug 04 '22 at 17:50

Briuor · Answer 1 · 2022-08-05T13:04:15.523

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>

I've seen the example. But what I want is to read the barcode without taking any action with the application. I just intend to arrive and read the barcode and receive the value. And this is how the example I put in the question works. I just want to hide the input so it won't be visible — Bruno, Aug 05 '22 at 09:12
Even putting the input type text, it never takes the barcode value. Can you help? Here in your example it works, but in my application it does not receive the barcode reading value — Bruno, Aug 08 '22 at 15:24

Hide the input and still receive the value

1 Answers1