Disable keyboard with HTML input and allow scanners

Question

I have an HTML input

<input type="text" id="txtInput">

and I need to disable all keyboard keys for input, only to allow barcode scanners to get the data of the barcode and fill it with the input.

I tried "readonly" and "disabled" and javaScript keydown, but all those solutions disable everything including barcode scanners too.

Is there's any way for doing this?

Answer 1

So first you need to understand that barcode scanners pretend to be keyboards. So they will trigger JS keystroke events just like real keyboards. The only way I can think of to seperate the 2 is some timing-based heuristic (the idea being that nobody can type an entire 10-digit barcode in less than 0.1 seconds).

So basically, you would have some javascript that would do something along these lines:

• (onkeydown) append the pressed key to a global string and start a timer with setTimeout (with very low delay, say 10 ms)
• (onkeydown) append the pressed key as before, but don't start the timer again
• in your setTimeout function, check if the string of keypresses is at least 3 keys (or longer, depending on the barcodes that you expect). If so, write the string to the input field. Otherwise, drop the string
• rinse and repeat

It's gonna be ugly, but if you're really desperate, it might work

var delay = (function(){
   var timer = 0;
   return function(callback, ms){
      clearTimeout (timer);
      timer = setTimeout(callback, ms);
   };
})();

$("#txtInput").on("input", function() {
   delay(function(){
      if ($("#txtInput").val().length < 8) {
          $("#txtInput").val("");
      }
   }, 20 );
});

Answer 2

I kept thinking after I posted my reply to you for a solution because back in the days of DOS/Windows this used to be a pretty common request but not over the web.

What you can do is to setup your scanner and send as the beginning of a scan a set of string chars as the "starting point" for the scan and then some other chars as the end, I was thinking in something like this:

@@XX@@YOUR REAL SCAN GOES HERE@@YY@@\\r

And then you can filter the content of that field at the ENTER char and check if it is coming from your scanner or not and then assign it. Not sure if your scanner supports pre-post-pending data to your scan but if it does it definitely does worth the try.

Answer 3

<script>    
setTimeout('timedRefresh()', 300000);   
setTimeout('refocus()', 1000);      
//********** KEYPRESS PREVENTION
$(document).ready(function(){
    $("#txtInput").keypress(function() {
        setTimeout('refocus()', 700)
    });
}); 

//********** PASTE PREVENTION $(document).ready(function(){
$(document).on("cut copy paste","#txtInput",function(e) {
    e.preventDefault();
    });  
}); 

When you press it clears every character. but you can use barcode scanner to key in your text. You are not allowed to paste also. 700ms timeout is what i believe the most optimized time for barcode to keyin the text and press enter.

Answer 4

<input type="number" id="txtInput">

这将只允许输入数字

Answer 5

I found a jquery script that detects input of keyboard vs scanner https://jsfiddle.net/PhilM/Bf89R/3/ and had it modified to block keyboard entry, paste, and autofill.

in the html I disabled the autofil.

   <form autocomplete="off" onsubmit="return false">
  <input type="text" id="scanInput"/>
</form>

and then used the query to detect and block keybard and paste entry.

let inputStart, inputStop;

$("#scanInput")[0].onpaste = e => e.preventDefault();
// handle a key value being entered by either keyboard or scanner
var lastInput

let checkValidity = () => {
    if ($("#scanInput").val().length < 10) {
      $("#scanInput").val('')
  } else {
    $("body").append($('<div style="background:green;padding: 5px 12px;margin-bottom:10px;" id="msg">ok</div>'))
  }
  timeout = false
}

let timeout = false
$("#scanInput").keypress(function (e) {
  if (performance.now() - lastInput > 1000) {
    $("#scanInput").val('')
  }
    lastInput = performance.now();
    if (!timeout) {
    timeout = setTimeout(checkValidity, 200)
  }
});

demo here http://jsfiddle.net/uyzsb3o0/8/