Keyboard Events in JavaScript

1// Method 1: Keydown event
2document.addEventListener('keydown', function(e) {
3    console.log('Key pressed:', e.key);
4    console.log('Key code:', e.keyCode);
5    console.log('Code:', e.code);
6});
7
8// Method 2: Keyup event
9document.addEventListener('keyup', function(e) {
10    console.log('Key released:', e.key);
11});
12
13// Method 3: Keypress event (deprecated, use keydown)
14document.addEventListener('keypress', function(e) {
15    console.log('Character:', e.key);
16});
17
18// Method 4: Specific keys
19document.addEventListener('keydown', function(e) {
20    if (e.key === 'Enter') {
21        console.log('Enter pressed');
22    } else if (e.key === 'Escape') {
23        console.log('Escape pressed');
24    } else if (e.key === 'ArrowUp') {
25        console.log('Arrow up');
26    }
27});
28
29// Method 5: Modifier keys
30document.addEventListener('keydown', function(e) {
31    if (e.ctrlKey && e.key === 's') {
32        e.preventDefault();
33        console.log('Ctrl+S pressed - Save');
34    }
35    
36    if (e.shiftKey && e.key === 'Enter') {
37        console.log('Shift+Enter');
38    }
39    
40    if (e.altKey && e.key === 'f') {
41        console.log('Alt+F');
42    }
43    
44    if (e.metaKey && e.key === 'k') {
45        console.log('Cmd+K (Mac) or Ctrl+K');
46    }
47});
48
49// Method 6: Input field keyboard events
50const input = document.getElementById('myInput');
51
52input.addEventListener('keydown', function(e) {
53    if (e.key === 'Enter') {
54        console.log('Form submitted');
55    }
56});
57
58input.addEventListener('keyup', function(e) {
59    console.log('Input value:', e.target.value);
60});
61
62// Method 7: Prevent default for specific keys
63document.addEventListener('keydown', function(e) {
64    // Prevent spacebar from scrolling
65    if (e.key === ' ' && e.target.tagName !== 'INPUT') {
66        e.preventDefault();
67    }
68    
69    // Prevent F5 refresh
70    if (e.key === 'F5') {
71        e.preventDefault();
72    }
73});
74
75// Method 8: Keyboard shortcuts
76const shortcuts = {
77    'ctrl+k': () => console.log('Search'),
78    'ctrl+s': () => console.log('Save'),
79    'ctrl+z': () => console.log('Undo'),
80    'ctrl+shift+z': () => console.log('Redo')
81};
82
83document.addEventListener('keydown', function(e) {
84    const key = e.key.toLowerCase();
85    let shortcut = '';
86    
87    if (e.ctrlKey) shortcut += 'ctrl+';
88    if (e.shiftKey) shortcut += 'shift+';
89    if (e.altKey) shortcut += 'alt+';
90    
91    shortcut += key;
92    
93    if (shortcuts[shortcut]) {
94        e.preventDefault();
95        shortcuts[shortcut]();
96    }
97});