Cross-Browser Keyboard Event Handling

jQuery-style Event Wrapper

// Lightweight cross-browser event wrapper
const KB = (function() {
  'use strict';
  
  // Private normalizer
  const normalizer = new KeyboardEventNormalizer();
  
  // Event cache for cleanup
  const eventCache = new WeakMap();
  
  return {
    on: function(element, eventType, selector, handler) {
      // Handle overloaded arguments
      if (typeof selector === 'function') {
        handler = selector;
        selector = null;
      }
      
      const wrappedHandler = function(e) {
        const normalized = normalizer.normalize(e);
        
        // Event delegation
        if (selector) {
          let target = e.target;
          while (target && target !== element) {
            if (target.matches(selector)) {
              handler.call(target, normalized, e);
              break;
            }
            target = target.parentElement;
          }
        } else {
          handler.call(element, normalized, e);
        }
      };
      
      // Store for cleanup
      if (!eventCache.has(element)) {
        eventCache.set(element, []);
      }
      eventCache.get(element).push({
        type: eventType,
        handler: wrappedHandler
      });
      
      // Add listener
      addEventListenerCompat(element, eventType, wrappedHandler);
    },
    
    off: function(element, eventType) {
      const handlers = eventCache.get(element) || [];
      handlers.forEach(item => {
        if (!eventType || item.type === eventType) {
          if (element.removeEventListener) {
            element.removeEventListener(item.type, item.handler);
          } else if (element.detachEvent) {
            element.detachEvent('on' + item.type, item.handler);
          }
        }
      });
    },
    
    // Utility to check key combinations
    isKey: function(event, key, modifiers = {}) {
      const normalized = normalizer.normalize(event);
      
      // Check key
      if (normalized.key !== key) return false;
      
      // Check modifiers
      const mods = Object.assign({
        alt: false,
        ctrl: false,
        meta: false,
        shift: false
      }, modifiers);
      
      return normalized.altKey === mods.alt &&
             normalized.ctrlKey === mods.ctrl &&
             normalized.metaKey === mods.meta &&
             normalized.shiftKey === mods.shift;
    }
  };
})();

// Usage
KB.on(document, 'keydown', function(e, originalEvent) {
  // e is normalized, originalEvent is raw
  
  if (KB.isKey(e, 'Enter', { ctrl: true })) {
    console.log('Ctrl+Enter pressed');
    originalEvent.preventDefault();
  }
  
  // Works in all browsers
  console.log('Key pressed:', e.key);
});

Complete Cross-Browser Keyboard Library

// CrossKeys.js - Complete cross-browser keyboard handling library
(function(global) {
  'use strict';
  
  const CrossKeys = {
    version: '1.0.0',
    
    // Configuration
    config: {
      enablePolyfills: true,
      normalizeEvents: true,
      debugMode: false
    },
    
    // Initialize library
    init: function(options = {}) {
      Object.assign(this.config, options);
      
      if (this.config.enablePolyfills) {
        this.installPolyfills();
      }
      
      return this;
    },
    
    // Install necessary polyfills
    installPolyfills: function() {
      // CustomEvent polyfill for IE
      if (typeof window.CustomEvent !== 'function') {
        window.CustomEvent = function(event, params) {
          params = params || { bubbles: false, cancelable: false, detail: null };
          const evt = document.createEvent('CustomEvent');
          evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
          return evt;
        };
        window.CustomEvent.prototype = window.Event.prototype;
      }
      
      // KeyboardEvent.key polyfill
      if (!('key' in KeyboardEvent.prototype)) {
        Object.defineProperty(KeyboardEvent.prototype, 'key', {
          get: function() {
            return this._normalizedKey || this.keyIdentifier || this.keyCode;
          }
        });
      }
      
      // String.prototype.includes polyfill
      if (!String.prototype.includes) {
        String.prototype.includes = function(search, start) {
          return this.indexOf(search, start) !== -1;
        };
      }
    },
    
    // Main event handler factory
    on: function(element, events, handler, options = {}) {
      const elements = typeof element === 'string' 
        ? document.querySelectorAll(element) 
        : [element];
      
      const eventList = events.split(' ');
      const normalizer = this.config.normalizeEvents 
        ? new KeyboardEventNormalizer() 
        : null;
      
      elements.forEach(el => {
        eventList.forEach(eventType => {
          const wrappedHandler = (e) => {
            const event = normalizer ? normalizer.normalize(e) : e;
            
            if (this.config.debugMode) {
              console.log('CrossKeys Event:', event);
            }
            
            handler.call(el, event, e);
          };
          
          el.addEventListener(eventType, wrappedHandler, options);
        });
      });
    },
    
    // Keyboard shortcut matcher
    matches: function(event, pattern) {
      const parts = pattern.toLowerCase().split('+').map(p => p.trim());
      const key = parts[parts.length - 1];
      const modifiers = parts.slice(0, -1);
      
      // Check key
      if (event.key.toLowerCase() !== key && 
          event.code.toLowerCase() !== key) {
        return false;
      }
      
      // Check modifiers
      const hasCtrl = modifiers.includes('ctrl') || modifiers.includes('control');
      const hasAlt = modifiers.includes('alt');
      const hasShift = modifiers.includes('shift');
      const hasMeta = modifiers.includes('meta') || modifiers.includes('cmd');
      
      return event.ctrlKey === hasCtrl &&
             event.altKey === hasAlt &&
             event.shiftKey === hasShift &&
             event.metaKey === hasMeta;
    },
    
    // Utility functions
    utils: {
      isTextInput: function(element) {
        const tagName = element.tagName.toLowerCase();
        if (tagName === 'textarea') return true;
        if (tagName !== 'input') return false;
        
        const type = element.type.toLowerCase();
        const textTypes = [
          'text', 'password', 'email', 'url', 'tel', 
          'search', 'number', 'date', 'time', 'datetime-local'
        ];
        return textTypes.includes(type);
      },
      
      getPrintableKey: function(event) {
        if (event.key.length === 1) return event.key;
        return null;
      },
      
      serialize: function(event) {
        const parts = [];
        if (event.ctrlKey) parts.push('Ctrl');
        if (event.altKey) parts.push('Alt');
        if (event.shiftKey) parts.push('Shift');
        if (event.metaKey) parts.push('Meta');
        parts.push(event.key);
        return parts.join('+');
      }
    }
  };
  
  // Export
  if (typeof module !== 'undefined' && module.exports) {
    module.exports = CrossKeys;
  } else {
    global.CrossKeys = CrossKeys;
  }
  
})(typeof window !== 'undefined' ? window : this);

// Usage
CrossKeys.init({ debugMode: true });

CrossKeys.on(document, 'keydown', function(event) {
  // Works consistently across all browsers
  if (CrossKeys.matches(event, 'ctrl+s')) {
    event.preventDefault();
    console.log('Save shortcut triggered');
  }
  
  if (CrossKeys.matches(event, 'ctrl+shift+p')) {
    event.preventDefault();
    console.log('Command palette triggered');
  }
});

Remember

• • Always test with real browsers, not just emulators
• • Consider mobile and international users
• • Use progressive enhancement strategies
• • Keep your polyfills and utilities up to date