解雇合成事件

Question

我从条形码扫描仪捕获输入（其作用类似于键盘输入）并且效果很好，但我现在无法访问条形码扫描仪，需要测试我的代码，所以我需要模拟条形码扫描仪（键盘）输入。

我认为为每个角色触发keypress事件会起作用，但事实并非如此。这是我的测试代码：

var barcodeScannerTimer;
var barcodeString = '';

// capture barcode scanner input
$('body').on('keypress', function (e) {
    barcodeString = barcodeString + String.fromCharCode(e.charCode);

    clearTimeout(barcodeScannerTimer);
    barcodeScannerTimer = setTimeout(function () {
        processBarcode();
    }, 300);
});

function processBarcode() {
    console.log('inside processBarcode with barcodeString "' + barcodeString + '"');

    if (!isNaN(barcodeString) && barcodeString != '') {  // @todo this check is lame. improve.
        alert('ready to process barcode: ' + barcodeString);
    } else {
        alert('barcode is invalid: ' + barcodeString);
    }

    barcodeString = ''; // reset
}


window.simulateBarcodeScan = function() {
    // simulate a barcode being scanned
    var barcode = '9781623411435';
    for (var i = 0; i < barcode.length; i++) {
        var e   = jQuery.Event("keypress");
        e.which = barcode[i].charCodeAt(0);
        $("body").focus().trigger(e);
    }
}

JSFIDDLE

如果您快速输入数字（例如1234），您会看到输入被捕获正常。但是，单击按钮以运行我的测试代码，并且不会捕获输入。该事件被触发，因为弹出一个警告框，但barcodeString为空！

为什么这不起作用？我应该触发除keypress以外的某些事件吗？

Answer 1

处理程序正在阅读charCode，但您只在事件上设置which。设置charCode，或从which读取。 https://jsfiddle.net/mendesjuan/bzfeuezv/1/

barcodeString = barcodeString + String.fromCharCode(e.which);

解雇合成事件

这提醒我们，解雇合成事件是一项棘手的工作，通常需要您熟悉处理程序（这很糟糕），这样您就不必构建完整的事件对象。此外，请注意，并非所有由jQuery触发的事件都会实际触发本机事件并导致其默认操作应用。

简而言之，触发keypress实际上并未在文本字段中键入字符或触发未使用jQuery设置的事件处理程序。

document.querySelector('input').addEventListener('keypress', function() {
  console.log('standard input key press handler');
});


var e = jQuery.Event("keypress");
e.which = "a".charCodeAt(0);
$('input').keypress(function(){
  console.log('jQuery input key press handler');
}).trigger('keypress', e);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="yo" />

触发的按键事件未被捕获？

1 个答案:

解雇合成事件