如何在JS中模拟按键

Question

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

我正在为我们在工作中使用的网络应用程序开发一个插件。这项工作包括需要扫描我已经在屏幕上显示的条形码，我们可以扫描，但在某些情况下，它已被证明有点难以扫描。我希望能够单击生成的条形码并让它模拟击键。这些字符不需要在任何输入字段中结束，因为我假设 webapp 设置为捕获整个 window 的击键。我只需要快速输入击键来模拟条形码扫描仪。

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

我想保留这个 vanilla javascript，因为我还在学习它并且不希望继续学习 Jquery，直到我在 JS 中站稳脚跟。

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

您可以通过为 keydown 和 keyup 发送 KeyboardEvent 来模拟按键。

例如为您的条形码模拟按键：

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中模拟按键

How to simulate key presses in JS

javascript

simulation