JavaScript中如何检测Shift+8（星号）按键？条码扫描器场景

Hey there, I get exactly what you're dealing with here—you wanted to detect the asterisk (*) key press for your barcode scanner, but instead pressing the 8 key triggers it, and even after adding a check for the Shift key, it's still not working right. Let's fix this step by step.

The Root Cause #

Most barcode scanners simulate keyboard input, and when they send an asterisk, they're actually sending the Shift+8 key combination. If your original code only checked for the 8 key without verifying the Shift modifier, that's why pressing 8 alone triggers the detection. Also, some scanners or keyboard setups might send the * character directly, so we need to account for both scenarios.

Fixed Code Implementation #

Here's how to adjust your barcode reader plugin to properly detect either Shift+8 or a direct * key press:

(function( $ ) {
    $.fn.mmpBarcodeReader = function() {
        // Initialize your buffer and other state variables here
        let scanBuffer = '';

        // Use keydown instead of keypress for better modifier key detection
        this.on('keydown', function(e) {
            // Check for BOTH Shift+8 AND direct * key input
            const isAsteriskTrigger = (e.shiftKey && e.key === '8') || e.key === '*';

            if (isAsteriskTrigger) {
                // Your asterisk handling logic goes here
                console.log('Asterisk (*) detected!');
                scanBuffer += '*'; // Update your buffer as needed
                e.preventDefault(); // Prevent default 8/* input if you don't want it in the field
                return;
            }

            // Rest of your barcode scanning logic for other keys
            // ... (existing code for handling digits, other characters)
        });

        return this;
    };
})( jQuery );

Key Changes & Explanations #

• Use keydown instead of keypress: The keydown event reliably captures modifier key states (like shiftKey) across browsers, whereas keypress is focused on character input and may not always report modifier keys correctly.
• Dual condition check: We cover both cases where the scanner sends Shift+8 (check e.shiftKey and e.key === '8') and where it sends the * character directly (e.key === '*'). This ensures compatibility with different scanner behaviors.
• Prevent default action: Adding e.preventDefault() stops the browser from inserting a 8 or * into the input field if that's not desired for your barcode workflow.

Troubleshooting Tips #

If it's still not working, try these quick checks:

1. Add a debug log inside the event handler: console.log('Key:', e.key, 'Shift pressed:', e.shiftKey) to see exactly what values are being passed when you press keys. This will help you confirm if the Shift state is being detected correctly.
2. Make sure there are no other event listeners on the same element that might be interfering with your key detection.
3. Verify that your scanner is set to simulate keyboard input (most are by default, but some have configurable modes).

That should resolve the issue of false triggers from the 8 key and properly detect the intended Shift+8 asterisk input.

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