I want the input to receive the value read from a barcode being in type hidden. I have the following code:

let $scannerInput = $(".scanner-input");

$(document).ready(function(){
  $scannerInput.focus();
});

.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"  id="ColabAssid" value="">
  <button type="submit"  onclick="inserir_assid();"> <i ></i></button>
</form>

But with this code it only works if you put the input of type text.

Can you help?

CodePudding user response：

An input with type="hidden" isn't focusable. But you can achieve a similar effect by using a text input field with an opacity of 0:

<input type="text" name="ColabAssid"  id="ColabAssid" value="" style="opacity: 0; position: absolute; top: 0; left: 0">

Doing it like this makes the filed focusable but invisible to the user.

CodePudding user response：

How about not hiding the element, but not displaying it as an input, similar to the “drop zones” for file inputs which simply hide the input and display the label instead.

This would be more accessible for users with disabilities as well, and more user friendly, as it communicates when it’s expecting the user to scan the code.

Also, the user should receive a feedback as to whether the scan worked, or whether the form is missing information.

What you cannot do is to prevent the user from entering anything with their keyboard. That’s just how barcode scanners work, which is very flexible and powerful.

.barcode {
  display: block;
  text-align: center;
  border: 1px solid gray;
  border-radius: .2em;
  padding: 1.2em .5em .2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.barcode:focus-within {
  outline: 2px solid blue;
}

.barcode-icon {
  margin: 0;
}

.barcode-input {
  border: none;
  text-align: center;
  appearance: none;
  font-size: 80%;
}

.barcode-input:focus {
  outline: none;
}

.barcode-status {
  visibility: hidden;
}

.barcode-input:focus ~ .barcode-status.barcode-status-focus {
  visibility: visible;
}

.barcode-input:valid ~ .barcode-status.barcode-status-focus {
  visibility: hidden;
}

<label >
  <span>Scan Barcode</span>
  <pre  aria-hidden="true">║█║▌║█║▌│║▌█║▌║</pre>

  <input type="text" name="barcode"  pattern="\d " required>
  
  <span >Scan Now …</span>
</label>