Question

我正在研究yii2。我在表单中使用typeahead。现在有一个用例，用户将使用barcode扫描barcode scanner，然后它的输入将显示在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但它是自动完成的，我正在使用typeahead。

如何禁用前面窗体上特定文本框的键盘输入，并允许用户将值扫描到该文本框中（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()

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

1 个答案:

我的代码