Keyboard Events

// Method 1: Keydown event
document.addEventListener('keydown', function(e) {
    console.log('Key pressed:', e.key);
    console.log('Key code:', e.keyCode);
    console.log('Code:', e.code);
});

// Method 2: Keyup event
document.addEventListener('keyup', function(e) {
    console.log('Key released:', e.key);
});

// Method 3: Keypress event (deprecated, use keydown)
document.addEventListener('keypress', function(e) {
    console.log('Character:', e.key);
});

// Method 4: Specific keys
document.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
        console.log('Enter pressed');
    } else if (e.key === 'Escape') {
        console.log('Escape pressed');
    } else if (e.key === 'ArrowUp') {
        console.log('Arrow up');
    }
});

// Method 5: Modifier keys
document.addEventListener('keydown', function(e) {
    if (e.ctrlKey && e.key === 's') {
        e.preventDefault();
        console.log('Ctrl+S pressed - Save');
    }
    
    if (e.shiftKey && e.key === 'Enter') {
        console.log('Shift+Enter');
    }
    
    if (e.altKey && e.key === 'f') {
        console.log('Alt+F');
    }
    
    if (e.metaKey && e.key === 'k') {
        console.log('Cmd+K (Mac) or Ctrl+K');
    }
});

// Method 6: Input field keyboard events
const input = document.getElementById('myInput');

input.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
        console.log('Form submitted');
    }
});

input.addEventListener('keyup', function(e) {
    console.log('Input value:', e.target.value);
});

// Method 7: Prevent default for specific keys
document.addEventListener('keydown', function(e) {
    // Prevent spacebar from scrolling
    if (e.key === ' ' && e.target.tagName !== 'INPUT') {
        e.preventDefault();
    }
    
    // Prevent F5 refresh
    if (e.key === 'F5') {
        e.preventDefault();
    }
});

// Method 8: Keyboard shortcuts
const shortcuts = {
    'ctrl+k': () => console.log('Search'),
    'ctrl+s': () => console.log('Save'),
    'ctrl+z': () => console.log('Undo'),
    'ctrl+shift+z': () => console.log('Redo')
};

document.addEventListener('keydown', function(e) {
    const key = e.key.toLowerCase();
    let shortcut = '';
    
    if (e.ctrlKey) shortcut += 'ctrl+';
    if (e.shiftKey) shortcut += 'shift+';
    if (e.altKey) shortcut += 'alt+';
    
    shortcut += key;
    
    if (shortcuts[shortcut]) {
        e.preventDefault();
        shortcuts[shortcut]();
    }
});