Yii2：如何检测输入数据来自键盘还是扫码枪

我之前刚好在项目里实现过类似需求，Yii2框架下用jQuery就能轻松搞定，给你分享两种靠谱的思路：

一、轻量自实现（无需插件） #

核心逻辑是利用扫码枪输入速度远快于键盘的特点：扫码枪输入一串字符的间隔通常在100ms以内，而人工键盘输入的间隔一般会超过这个值。

直接上代码，你可以放到Yii2视图的registerJs里：

$(document).ready(function() {
  let lastKeyTime = 0;
  let isScanner = false;
  const input = $('#your-input-id'); // 替换成你的输入框ID，比如ActiveForm生成的`Product-barcode`

  input.on('keydown', function(e) {
    const currentTime = new Date().getTime();
    const timeDiff = currentTime - lastKeyTime;

    // 时间差小于100ms，判定为扫码枪输入
    if (timeDiff < 100 && lastKeyTime !== 0) {
      isScanner = true;
    } else {
      isScanner = false;
    }

    lastKeyTime = currentTime;

    // 扫码枪通常会以回车结尾，这里可以处理扫码完成的逻辑
    if (e.keyCode === 13 && isScanner) {
      e.preventDefault(); // 阻止默认回车提交表单
      const scanValue = input.val();
      console.log('扫码枪输入内容:', scanValue);
      // 这里写你的业务逻辑，比如验证、提交等
    } else if (e.keyCode !== 13 && !isScanner) {
      console.log('键盘输入');
      // 键盘输入的处理逻辑
    }
  });
});

二、使用成熟的jQuery插件 #

如果不想自己写逻辑，可以用jquery-scanner-detection这个专门做扫码检测的插件，适配性更强：

用法步骤： #

1. 把插件的JS文件引入到Yii2项目中（可以通过AssetBundle管理，或者直接在视图里注册）
2. 给输入框绑定检测事件：

$(document).ready(function() {
  $('#your-input-id').scannerDetection({
    timeBeforeScanTest: 200, // 判定扫码的时间阈值，单位ms
    endChar: 13, // 扫码枪结束字符（通常是回车）
    onComplete: function(code) {
      // 扫码完成回调，code是扫描到的完整内容
      console.log('扫码枪输入:', code);
      // 执行你的业务操作，比如提交表单、查询数据等
    },
    onError: function(inputStr) {
      // 键盘输入的回调
      console.log('键盘输入内容:', inputStr);
    },
    onKeyDetect: function(e) {
      // 每一次按键的回调，可选
    }
  });
});

Yii2专属注意事项 #

• 如果是用ActiveForm生成的输入框，ID格式一般是[模型名]-[字段名]，比如你的模型是Product，字段是barcode，那ID就是Product-barcode，记得选择器要对应正确
• 所有JS代码建议放在$(document).ready()里，或者用Yii2的$this->registerJs()方法包裹，确保DOM加载完成后执行
• 不同品牌的扫码枪可能有不同的输出设置（比如是否带回车、前缀字符），可以在扫码枪的设置界面调整，和代码里的参数对应上，能提升检测准确率

内容的提问来源于stack exchange，提问作者Roby Sottini