禁用键盘输入 - 允许 USB 条形码扫描仪输入

Question

我正在处理yii2。我在我的表格中使用typeahead。现在有一个用例，用户将使用barcode scanner 扫描barcode，然后它的输入将显示在typeahead 中。目前，一切正常。

但我想尽量减少用户输入错误，不要在打字头中输入任何内容，而是他会扫描条形码，然后扫描的值将出现在文本框下方，用户将点击它，因此输入框将被填充.有关参考，请参见下图。

下面是我的代码。

查看

<style>
span.twitter-typeahead{
    width: 100%;
}
</style>

  <?php  if($model->isNewRecord){?>
    <label class="control-label">Select Meter #</label><br />
    <input type="text" id="the-meter-id" class="form-control col-md-12" value="<?=$model->meter_id?>"/>
    <div style="clear: both;"></div>
    <div id="selected_meter_container" ></div>
    <div style="clear: both;"></div>

    <label class="control-label">Select IMSI #</label><br />
    <input type="text" id="the-sim-id" class="form-control col-md-12" value="<?=$model->sim_id?>"/>
    <div style="clear: both;"></div>
    <div id="selected_imsi_container" ></div>
    <div style="clear: both;"></div>
<?php } ?>

JS

$urlsim = Url::toRoute('/metertosimmapping/sim');
$(document).ready(function (){

var surveyReferences = new Bloodhound({
              datumTokenizer: Bloodhound.tokenizers.obj.whitespace('imsi'),
              queryTokenizer: Bloodhound.tokenizers.whitespace,
              prefetch: 'survey',
              remote: {
                url: '$urlsim?q=%QUERY',
                wildcard: '%QUERY'
              }
        });
 $('#the-sim-id').typeahead(null, {
            limit: 50,
            name: 'ref-numbers',
            display: 'imsi',
            source: surveyReferences,
            suggestion: function(data) {
                    return '<p><strong>' + data.id + '</strong> – ' + data.imsi + '</p>';
        }
    }
    );
 jQuery('#the-sim-id').on('typeahead:selected', function (e, datum) {   
       $('#selected_imsi_container').html('');
        $('#metertosimmapping-imsi').val('');
         $('#metertosimmapping-sim_number').val('');
         $('#metertosimmapping-operator_name').val('');
         //$('#metertosimmapping-sim_status').val(datum.sim_status);
        $('#metertosimmapping-historic').val(datum.historic);
        var html = '<div class="selected-imsi"><input type="hidden" name="selected_imsi[]" value="'+datum.id+'" />'+datum.imsi+'<a onclick="$(this).closest(\'.selected-imsi\').remove()">X</a></div>';
        $('#selected_imsi_container').append(html);
        $('#metertosimmapping-imsi').append(datum.imsi);
         $('#the-sim-id').typeahead('val','');
         $('#metertosimmapping-sim_number').val(datum.sim_number);
         $('#metertosimmapping-operator_name').val(datum.operator_name);
         //$('#metertosimmapping-sim_status').val(datum.sim_status);
        $('#metertosimmapping-historic').val(datum.historic);
     });

});

我已经检查了这个solution，但它是用于自动完成的，我正在使用预输入。

如何在前面表单的特定文本框中禁用键盘输入，并允许用户将值扫描到该文本框（USB 扫描仪）

更新 1

好的，我已经完成了第一部分，即通过执行以下操作禁用用户输入

<input type="text" id="the-sim-id" class="form-control col-md-12" onkeydown="return false" value="<?=$model->sim_id?>"/>

现在它确实禁用了用户输入，但也禁用了扫描仪输入。如何允许用户将值扫描到该文本框（USB 扫描仪）？

任何帮助将不胜感激。

Answer 1

我通过在 js 中观察文档上的按键事件解决了类似的问题。当光标焦点不在输入字段上时，它在 BODY 节点上。 USB 条码扫描器在技术上是一种按键。

我的代码

document.onkeypress = (e) => {
  e = e || window.event;
  const digit = e.key;
  if(e.target.nodeName === 'BODY' && digit.match(/[0-9]/i)){
    console.log(digit)
  }
};

我不确定这是现代框架中直接访问 Document 的最佳做法。使用 jQuery 你也许可以使用类似的东西

$('body').keypress()