Question

我有一个HTML输入

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

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

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

有没有办法做到这一点？

Answer 1

首先，您需要了解条形码扫描仪假装是键盘。因此，它们将像真正的键盘一样触发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 2

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

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

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

然后，您可以在ENTER字符处过滤该字段的内容，并检查它是否来自您的扫描仪，然后分配它。不确定您的扫描仪是否支持扫描前的待处理后数据，但如果确实如此，则确实值得尝试。

Answer 3

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

这样只能输入数字

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中，我禁用了自动过滤功能。

   <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输入禁用键盘并允许扫描仪

5 个答案:

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