Create Custom Keyboard Shortcuts For Pages - key-binding.js

key-binding.js is a jQuery plugin to create custom keyboard shortcuts by binding specific keypress events to methods.

1. Load both jQuery JavaScript library and the JavaScript file key-binding.js in the document.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="jquery-key-binding.js"></script>

2. Create a field to accept the keyboard shortcut you prefer.

<div id="alertBinding"></div>

3. Initialize the plugin.

$('#alertBinding').keyBinding({
  name: 'openAlert', 
  key: 'a', 
  size: 100
})

4. Fire an event as you press the keyboard shortcut.

$(document).on('keyBinding', (event, binding) => {
  if (binding.name === 'openAlert') alert('Hello World!')
})

This awesome jQuery plugin is developed by romaindurand. For more Advanced Usages, please check the demo page or visit the official website.