Question

我希望单击<img>，并使浏览器模拟变量+ [ENTER]的键入。这基本上应该模拟如果扫描仪扫描条形码会发生的事情

我正在为我们在工作中使用的Web应用程序开发一个插件。这项工作包括需要扫描我必须显示在屏幕上的条形码，我们才能进行扫描，但是在某些情况下，事实证明扫描起来有些困难。我希望能够单击所生成的条形码，并使其模拟击键。字符不需要以任何输入字段结尾，因为我假设将webapp设置为捕获整个窗口的击键。我只需要快速输入击键即可模拟条形码扫描器。

当前提供的jsfiddle会将变量发送到输入字段，但这对于最终结果不是必需的。

我想保留这个原始的javascript，因为我仍在学习它，并且在我将脚牢牢扎在JS中之前，不希望继续使用Jquery。

https://jsfiddle.net/pshock13/o2gtzaj5/215

document.getElementById('barcode').addEventListener('click', function() {
      //this is where I want theBarcode to be typed out + [ENTER] automatically.
      main_input.value = theBarcode;
    })

Answer 1

您可以通过为KeyboardEvent和keydown分配一个keyup来模拟按键。

例如模拟条形码的按键：

document.getElementById('barcode').addEventListener('click', function() {
    main_input.value = theBarcode;

    [...theBarcode].forEach(function(c) {
        window.dispatchEvent(new KeyboardEvent('keydown',{'key':c}));
        window.dispatchEvent(new KeyboardEvent('keyup',{'key':c}));
    });

    window.dispatchEvent(new KeyboardEvent('keydown',{'key':'Enter'})); 
    window.dispatchEvent(new KeyboardEvent('keyup',{'key':'Enter'}));
});

如何在JS中模拟按键

1 个答案: