Press "Enter" to skip to content

An Easy To Use Handling Keyboard Shortcuts in JavaScript | shortcut.js

shortcut.js – The easy-to-use js hotkey library code is based on an article titled “Handling Keyboard Shortcuts in JavaScript” by Benny VA, which defines a dependency-free shortcut key solution that only works. shortcut.js is a lightweight (4kb mini) keyboard shortcut (shortcut key) JavaScript library that allows you to associate keyboard combinations and keystrokes.

javascript keyboard events, javascript trigger enter key, keypress event in javascript, tab key press event in javascript, jquery trigger keypress, javascript enter key event

  • The single function method is abandoned for a two-function object
  • Shortcut removal function added
  • New option to disable shortcuts in the text area, input fields.
  • New option to manually select a key icon to view it.
  • Meta Key support for Mac (Thanks, Dj Walker-Morgan)

How to make use of it:

1. Insert the shortcut.min.js JavaScript library into your web page.

<script src="./shortcut.min.js"></script>

2. Create a shortcut and assign it a function to call on press.

shortcut.add("f5", function doKeyCheck() {
  // do something
});
shortcut.add("enter", function doKeyCheck() {
  // do something
});

3. Modifier keys are supported as effectively.

shortcut.add("Ctrl+A", function doKeyCheck() {
  // do something
});
shortcut.add("Ctrl+C", function doKeyCheck() {
  // do something
});

4. Customize the trigger occasion (‘keydown’,’keyup’, or ‘keypress’).

shortcut.add("Ctrl+A", function doKeyCheck() {
  // do something
},{
  'type':'keypress'
});

5. Determine whether or not to disable the library on text fields like input and textarea.

shortcut.add("Ctrl+A", function doKeyCheck() {
  // do something
},{
  'disable_in_input': true
});

6. Determine the DOM aspect through which the library watches for the keyboard occasion.

shortcut.add("Ctrl+A", function doKeyCheck() {
  // do something
},{
  'target': document
});

7. Determine whether or not to make use of keycode as a substitute.

shortcut.add("65", function doKeyCheck() {
  // do something
},{
  'keycode': true
});

8. Determine whether or not to permit the occasion to propagate.

shortcut.add("65", function doKeyCheck() {
  // do something
},{
  'propagate': true
});

9. Remove a shortcut.

shortcut.remove(keyCombo)

Usage

(This documentation was pulled from the original source and is attributed to Benny V A)

shortcut.add(keyCombo, callback, [{options}])

First Argument: The Shortcut Key Combination – String The shortcut key combination should be specified in this format … Modifier[+Modifier..]+Key. More about this in the Supported Keys section.

Second Argument: Function to be called – Function Specify the function here. This function will be called if the shortcut key is pressed. The event variable will be passed to it.

Third Argument[OPTIONAL]: Options – Associative Array This argument must be an associative array with any of these three options…

type – String

The event type – can be ‘keydown’,’keyup’,’keypress’. Default: ‘keydown’

disable_in_input – Boolean

If this is set to true, keyboard capture will be disabled in input and textarea fields. If these elements have focus, the keyboard shortcut will not work. This is very useful for single key shortcuts. Default: false

target – DOM Node

The element that should be watched for the keyboard event. Default : document

propagate – Boolean

Allow the event to propagate? Default : false

keycode – Integer

Watch for this keycode. For eg., the keycode ’65’ is ‘a’.

shortcut.remove(keyCombo)

Just one argument – the shortcut combination that was attached to a function earlier. Make sure that this is exactly the same string that you used while adding the shortcut.

The valid Keys are…

  • All alpha/numeric keys – abc…xyz,01..89
  • Special Characters – Every special character on a standard keyboard can be accessed.
  • Special Keys…
  • Tab
  • Space
  • Return
  • Enter
  • Backspace
  • Scroll_lock
  • Caps_lock
  • Num_lock
  • Pause
  • Insert
  • Home
  • Delete
  • End
  • Page_up
  • Page_down
  • Left
  • Up
  • Right
  • Down
  • F1
  • F2
  • F3
  • F4
  • F5
  • F6
  • F7
  • F8
  • F9
  • F10
  • F11
  • F12

These keys are case insensitive – so don’t worry about using the correct case.

Capture Keyboard Input And Trigger A Function On Press, shortcut.js Plugin/Github, how to disable key press event in javascript, jquery trigger enter key


See Demo And Download

Official Website(houdinii): Click Here

This superior jQuery/javascript plugin is developed by houdinii. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.