Hide the input and still receive the value

Issue

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?

Solution

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>

Answered By – Briuor

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published