2

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/[email protected]/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?

Improve this question
6
  • Scanners typically act like keyboards. Inputs typically need focus to receive input. Commented Aug 4, 2022 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? Commented Aug 4, 2022 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. Commented Aug 4, 2022 at 16:45
  • I think it can help you stackoverflow.com/questions/67116377/… Commented Aug 4, 2022 at 16:48
  • @Briuor I saw the example you posted but I couldn't get it to work, can you help? Commented Aug 4, 2022 at 17:02

1 Answer 1

Reset to default
1

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/[email protected]/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>

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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
Oh, ok I changed the example to the right way now
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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.