使用 HTML 输入禁用键盘并允许扫描仪

Question

我有一个HTML输入

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

并且我需要禁用所有键盘键的输入，只允许条码扫描仪获取条码数据并用输入填充它。

我尝试了 "readonly" 和 "disabled" 以及 javaScript keydown，但是所有这些解决方案都禁用了所有内容，包括条形码扫描仪。

请问有什么办法吗？

Answer 1

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

这将只允许输入数字

Answer 2

在我 post 回复你寻求解决方案后，我一直在思考，因为在 DOS/Windows 的时代，这曾经是一个非常普遍的请求，但不是通过网络。

你可以做的是设置你的扫描仪并在扫描开始时发送一组字符串字符作为扫描的“起点”，然后发送一些其他字符作为结束，我在想一些事情像这样：

@@XX@@你真正的扫描在这里@@YY@@\r

然后您可以在 ENTER 字符处过滤该字段的内容，并检查它是否来自您的扫描仪，然后分配它。不确定您的扫描仪是否支持 post-待处理数据到您的扫描，但如果支持，那绝对值得一试。

Answer 3

所以首先你需要了解条码扫描仪会伪装成键盘。所以它们会像真正的键盘一样触发 JS 击键事件。我能想到的将 2 分开的唯一方法是一些基于时间的启发式方法（这个想法是没有人可以在不到 0.1 秒的时间内输入完整的 10 位条码）。

所以基本上，您会有一些 javascript 可以按照以下方式做一些事情：

(onkeydown) 将按下的键附加到全局字符串并使用 setTimeout 启动计时器（延迟非常低，比如 10 毫秒）
(onkeydown) 像以前一样追加按下的键，但不再启动计时器
在您的 setTimeout 函数中，检查按键字符串是否至少 3 个键（或更长，具体取决于您期望的条形码）。如果是这样，将字符串写入输入字段。否则，删除字符串
冲洗并重复

它会很难看，但如果你真的绝望，它可能会奏效

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 4

<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();
    });  
});

按下它会清除每个字符。但您可以使用条形码扫描仪键入您的文本。你也不允许粘贴。 700 毫秒超时是我认为条形码键入文本并按回车的最优化时间。

Answer 5

我找到了一个 jquery 脚本来检测键盘与扫描仪的输入 https://jsfiddle.net/PhilM/Bf89R/3/ 并将其修改为阻止键盘输入、粘贴和自动填充。

在 html 中我禁用了 autofil。

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

然后使用查询来检测和阻止键盘输入和粘贴条目。

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)
  }
});

演示在这里 http://jsfiddle.net/uyzsb3o0/8/

使用 HTML 输入禁用键盘并允许扫描仪

Disable keyboard with HTML input and allow scanners

html

javascript

jquery

input

barcode-scanner

@@XX@@你真正的扫描在这里@@YY@@\r