Examples - Woker Job

Practical Examples

Here are real-world examples of how to use the Keycode Info tool and KeyboardEvent API in your projects.

Basic Key Detection

Simple Key Logger

document.addEventListener('keydown', (event) => {
  console.log(`Key: ${event.key}, Code: ${event.code}, KeyCode: ${event.keyCode}`);
});

Key Information Display

function displayKeyInfo(event) {
  const info = {
    key: event.key,
    code: event.code,
    keyCode: event.keyCode,
    location: event.location,
    modifiers: {
      ctrl: event.ctrlKey,
      alt: event.altKey,
      shift: event.shiftKey,
      meta: event.metaKey,
    },
  };

  console.table(info);
}

document.addEventListener('keydown', displayKeyInfo);

Keyboard Shortcuts

Global Shortcuts

document.addEventListener('keydown', (event) => {
  // Ctrl+S (Save)
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault();
    saveDocument();
  }

  // Ctrl+Z (Undo)
  if (event.ctrlKey && event.key === 'z') {
    event.preventDefault();
    undoAction();
  }

  // Ctrl+Y (Redo)
  if (event.ctrlKey && event.key === 'y') {
    event.preventDefault();
    redoAction();
  }
});

Application Shortcuts

class KeyboardShortcuts {
  constructor() {
    this.shortcuts = new Map();
    this.setupEventListeners();
  }

  addShortcut(keys, callback) {
    this.shortcuts.set(keys, callback);
  }

  setupEventListeners() {
    document.addEventListener('keydown', (event) => {
      const key = this.getKeyString(event);
      const callback = this.shortcuts.get(key);

      if (callback) {
        event.preventDefault();
        callback(event);
      }
    });
  }

  getKeyString(event) {
    const modifiers = [];
    if (event.ctrlKey) modifiers.push('Ctrl');
    if (event.altKey) modifiers.push('Alt');
    if (event.shiftKey) modifiers.push('Shift');
    if (event.metaKey) modifiers.push('Meta');

    return [...modifiers, event.key].join('+');
  }
}

// Usage
const shortcuts = new KeyboardShortcuts();
shortcuts.addShortcut('Ctrl+N', () => console.log('New document'));
shortcuts.addShortcut('Ctrl+O', () => console.log('Open document'));
shortcuts.addShortcut('Ctrl+S', () => console.log('Save document'));

Game Controls

Arrow Key Movement

class GameControls {
  constructor() {
    this.keys = new Set();
    this.setupEventListeners();
  }

  setupEventListeners() {
    document.addEventListener('keydown', (event) => {
      this.keys.add(event.code);
    });

    document.addEventListener('keyup', (event) => {
      this.keys.delete(event.code);
    });
  }

  isPressed(keyCode) {
    return this.keys.has(keyCode);
  }

  getMovement() {
    const movement = { x: 0, y: 0 };

    if (this.isPressed('ArrowLeft') || this.isPressed('KeyA')) {
      movement.x = -1;
    }
    if (this.isPressed('ArrowRight') || this.isPressed('KeyD')) {
      movement.x = 1;
    }
    if (this.isPressed('ArrowUp') || this.isPressed('KeyW')) {
      movement.y = -1;
    }
    if (this.isPressed('ArrowDown') || this.isPressed('KeyS')) {
      movement.y = 1;
    }

    return movement;
  }
}

// Usage
const controls = new GameControls();
setInterval(() => {
  const movement = controls.getMovement();
  if (movement.x !== 0 || movement.y !== 0) {
    console.log('Moving:', movement);
  }
}, 16); // 60 FPS

WASD Controls

class WASDControls {
  constructor() {
    this.keys = {
      w: false,
      a: false,
      s: false,
      d: false,
      space: false,
      shift: false,
    };

    this.setupEventListeners();
  }

  setupEventListeners() {
    document.addEventListener('keydown', (event) => {
      switch (event.code) {
        case 'KeyW':
          this.keys.w = true;
          break;
        case 'KeyA':
          this.keys.a = true;
          break;
        case 'KeyS':
          this.keys.s = true;
          break;
        case 'KeyD':
          this.keys.d = true;
          break;
        case 'Space':
          this.keys.space = true;
          break;
        case 'ShiftLeft':
        case 'ShiftRight':
          this.keys.shift = true;
          break;
      }
    });

    document.addEventListener('keyup', (event) => {
      switch (event.code) {
        case 'KeyW':
          this.keys.w = false;
          break;
        case 'KeyA':
          this.keys.a = false;
          break;
        case 'KeyS':
          this.keys.s = false;
          break;
        case 'KeyD':
          this.keys.d = false;
          break;
        case 'Space':
          this.keys.space = false;
          break;
        case 'ShiftLeft':
        case 'ShiftRight':
          this.keys.shift = false;
          break;
      }
    });
  }

  getState() {
    return { ...this.keys };
  }
}

Form Validation

Real-time Validation

class FormValidator {
  constructor(formElement) {
    this.form = formElement;
    this.setupEventListeners();
  }

  setupEventListeners() {
    this.form.addEventListener('keydown', (event) => {
      if (event.key === 'Enter') {
        event.preventDefault();
        this.submitForm();
      }

      if (event.key === 'Escape') {
        this.clearForm();
      }
    });

    this.form.addEventListener('keyup', (event) => {
      this.validateField(event.target);
    });
  }

  validateField(field) {
    const value = field.value;
    const type = field.type;

    switch (type) {
      case 'email':
        this.validateEmail(value, field);
        break;
      case 'tel':
        this.validatePhone(value, field);
        break;
      case 'password':
        this.validatePassword(value, field);
        break;
    }
  }

  validateEmail(email, field) {
    const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    this.setFieldState(field, isValid);
  }

  validatePhone(phone, field) {
    const isValid = /^\+?[\d\s-()]+$/.test(phone);
    this.setFieldState(field, isValid);
  }

  validatePassword(password, field) {
    const isValid = password.length >= 8;
    this.setFieldState(field, isValid);
  }

  setFieldState(field, isValid) {
    field.classList.toggle('valid', isValid);
    field.classList.toggle('invalid', !isValid);
  }

  submitForm() {
    const isValid = this.form.checkValidity();
    if (isValid) {
      console.log('Form submitted');
    } else {
      console.log('Form has errors');
    }
  }

  clearForm() {
    this.form.reset();
    this.form.querySelectorAll('.valid, .invalid').forEach((field) => {
      field.classList.remove('valid', 'invalid');
    });
  }
}

Accessibility Features

class KeyboardNavigation {
  constructor() {
    this.focusableElements = [];
    this.currentIndex = 0;
    this.setupEventListeners();
  }

  setupEventListeners() {
    document.addEventListener('keydown', (event) => {
      switch (event.key) {
        case 'Tab':
          event.preventDefault();
          this.navigateNext();
          break;
        case 'Shift':
          if (event.key === 'Tab') {
            event.preventDefault();
            this.navigatePrevious();
          }
          break;
        case 'Enter':
        case ' ':
          this.activateCurrent();
          break;
        case 'Escape':
          this.blurCurrent();
          break;
      }
    });
  }

  updateFocusableElements() {
    this.focusableElements = Array.from(
      document.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
      ),
    );
  }

  navigateNext() {
    this.currentIndex = (this.currentIndex + 1) % this.focusableElements.length;
    this.focusCurrent();
  }

  navigatePrevious() {
    this.currentIndex =
      this.currentIndex === 0 ? this.focusableElements.length - 1 : this.currentIndex - 1;
    this.focusCurrent();
  }

  focusCurrent() {
    this.updateFocusableElements();
    if (this.focusableElements[this.currentIndex]) {
      this.focusableElements[this.currentIndex].focus();
    }
  }

  activateCurrent() {
    const current = this.focusableElements[this.currentIndex];
    if (current) {
      current.click();
    }
  }

  blurCurrent() {
    if (document.activeElement) {
      document.activeElement.blur();
    }
  }
}

Debugging Tools

Key Event Logger

class KeyEventLogger {
  constructor() {
    this.events = [];
    this.setupEventListeners();
  }

  setupEventListeners() {
    document.addEventListener('keydown', (event) => {
      this.logEvent('keydown', event);
    });

    document.addEventListener('keyup', (event) => {
      this.logEvent('keyup', event);
    });
  }

  logEvent(type, event) {
    const logEntry = {
      type,
      timestamp: Date.now(),
      key: event.key,
      code: event.code,
      keyCode: event.keyCode,
      location: event.location,
      modifiers: {
        ctrl: event.ctrlKey,
        alt: event.altKey,
        shift: event.shiftKey,
        meta: event.metaKey,
      },
    };

    this.events.push(logEntry);
    console.log('Key Event:', logEntry);
  }

  getEvents() {
    return [...this.events];
  }

  clearEvents() {
    this.events = [];
  }

  exportEvents() {
    const data = JSON.stringify(this.events, null, 2);
    const blob = new Blob([data], { type: 'application/json' });
    const url = URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = url;
    a.download = 'key-events.json';
    a.click();

    URL.revokeObjectURL(url);
  }
}

Integration with Keycode Info Tool

Custom Key Display

class CustomKeyDisplay {
  constructor(container) {
    this.container = container;
    this.setupEventListeners();
  }

  setupEventListeners() {
    document.addEventListener('keydown', (event) => {
      this.displayKeyInfo(event);
    });
  }

  displayKeyInfo(event) {
    const keyInfo = {
      key: event.key,
      code: event.code,
      keyCode: event.keyCode,
      location: event.location,
      modifiers: this.getModifiers(event),
    };

    this.container.innerHTML = `
      <div class="key-display">
        <div class="key-name">${keyInfo.key}</div>
        <div class="key-details">
          <div>Code: ${keyInfo.code}</div>
          <div>KeyCode: ${keyInfo.keyCode}</div>
          <div>Location: ${keyInfo.location}</div>
          <div>Modifiers: ${keyInfo.modifiers}</div>
        </div>
      </div>
    `;
  }

  getModifiers(event) {
    const modifiers = [];
    if (event.ctrlKey) modifiers.push('Ctrl');
    if (event.altKey) modifiers.push('Alt');
    if (event.shiftKey) modifiers.push('Shift');
    if (event.metaKey) modifiers.push('Meta');
    return modifiers.join(' + ') || 'None';
  }
}

// Usage
const display = new CustomKeyDisplay(document.getElementById('key-display'));

These examples demonstrate practical applications of the KeyboardEvent API and how the Keycode Info tool can help you understand and debug keyboard interactions in your web applications.

Was this page helpful?

On this page

Practical Examples Basic Key Detection Keyboard Shortcuts Game Controls Form Validation Accessibility Features Debugging Tools Integration with Keycode Info Tool