javascript - 如何使字段只能通过扫描条形码作为值来编辑？

Question

我想知道是否有人可以指出我正确的方向。我有一个文本输入字段，我现在需要对其进行更新，以便用户只能通过扫描枪“编辑”以捕获条形码。到目前为止，我的代码已更新以防止用户通过键盘添加数据，但我不确定如何通过扫描使其再次“可编辑”。在测试期间，扫描被视为类似于按键:

    $('#barCodeNum').keydown(function(){
        $('#barCodeNum').attr('readonly', true);
    });

    $('#barCodeNum').keyup(function(){
        $('#barCodeNum').attr('readonly', true);
        alert("You cannot manually edit this field. Please Scan the item.");
    });

如果有任何形式的事件可以捕获扫描“ Action ”，我应该使用什么事件？或者有没有人找到另一种解决方案来处理这种情况？

Answer 1

编辑

另一个想法......来自Anthony关于隐藏字段的评论...
但是!一个隐藏字段就是无法聚焦...而您需要它才能使用代码条阅读器。

那么如何将“其他”输入放置在视口(viewport)之外(使用 CSS)而不是隐藏它...这样做，没有人可以聚焦它并直接输入。

因此，为了聚焦它，您还需要一个“启用扫描”按钮。该按钮还将启动一个时间间隔来检查快速输入的值!说...在 100 毫秒内...然后模糊该字段。

在这里，只有一个延迟需要处理:完整扫描最短时间。这样就更容易了...

没有人能这么快输入完整的代码。
然后您只需要根据您的典型代码验证代码长度是否正确。如果只有一两个字符在……肯定是无效的。

您必须通过测试您的扫描仪来调整“maxScanDelay”...100 毫秒可能太短了。但要尽可能短。 ;)

往下看:

var ScanCheck;
var maxScanDelay = 100;

$('#barCodeNum').on("keydown",function(e){
  e.preventDefault();
}); // End keydown on the visible

$('#barCodeNumHidden').on("input",function(e){
  $('#barCodeNum').val($(this).val());
}); // End keydown on the hidden

$("#scanEnable").on("click",function(){
  
  // Clear the fields
  $('#barCodeNum,#barCodeNumHidden').val("");
  
  $("#barCodeNumHidden").focus();
  $(this).text("Waiting for the code.");

  ScanCheck = setInterval(function(){
    console.log("interval");

    if($('#barCodeNumHidden').val()!=""){
      $("#barCodeNumHidden").blur();
      $("#scanEnable").text("Enable scan.");
      clearInterval(ScanCheck);
      console.log("interval stopped");
    }
  },maxScanDelay);
});

#barCodeNumHidden{
  position:fixed;
  top:-100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="barCodeNum" readonly>
<input type="text" id="barCodeNumHidden">
<br>
<br>
<button id="scanEnable">Enable scan.</button>

---

打字速度解决方案

如果您将其设置为只读...代码条阅读器将无法填充输入。

因为只是 return false; 不起作用...
我想我找到了一种方法来抓取快速输入的字符，这是人类无法做到的，并且摆脱了输入速度较慢的字符。

我没有代码条阅读器来测试...
您将有两个延迟需要调整:

1. 一个阈值(键的输入速度必须比这个延迟快)
2. “输出”延迟(允许在输出前收集所有字符)

这里是尝试的代码:

var string = "";
var timeout;
var lastEventTime = 0;

// ADJUST THOSE TWO!
var threshold = 35;
var outputDelay = 100;

$('#barCodeNum').on("keydown",function(e){

  e.preventDefault();
  var codebarInput = $(this);

  // Get current time.
  var thisEventTime = Date.now();
  console.log(lastEventTime);
  console.log(thisEventTime);

  // Grab the character.
  string += String.fromCharCode(e.keyCode)
  console.log(string);

  // If this event occurs sooner than the threshold delay, use the timeout to output the value when all characters are in string.
  if(lastEventTime+threshold > thisEventTime){
    console.log("OK");

    // Output the string after a delay.
    clearTimeout(timeout);
    timeout = setTimeout(function(){
      codebarInput.val(string);
    },outputDelay);

  // If this event occurs after the threshold delay, clear string and input value.
  }else{
    console.log("NOT OK");

    codebarInput.val("");
    string = "";
    console.log("Key prevented.");
  }


  // Keep this event time.
  lastEventTime = thisEventTime;

}); // End keydown

来 self 在 CodePen 上的测试, HOLDED down key works with a 35ms threshold...这似乎是最低的，因为 30ms 阻止了一切。有了这个阈值，即使我尽可能快地打字，也没有单个键通过。 ;)