wwwalireza/easyshortcut.js

JavaScript Library To Create Custom Keyboard Shortcuts

⌨️easyShortcut.js

A JavaScript Library To Create Custom Keyboard Shortcuts - See sample →

Advantages:

• Simplicity in making custom shortcuts
• Clean coding (no need to define many ifs and else anymore)
• Being object oriented

How to use

Install

First you need to download the file, and link the original file in the src folder to your html document

npm install easyshortcut

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

Use

Then we create a new object (shortcut) for each shortcut

new shortcut({
  ctrl: false, //deafult
  alt: false, //deafult
  shift: false, //deafult
  meta: false, //deafult
  key: "A",
  fn: ()=>{
    alert("Hello World")
  }
})

In the example above, if the user presses the "A" key, "Hello World" will be alerted

Options

■ Important keys :
Important keys include the following keys :

• ctrl
• alt
• shift
• meta

The value of each is (false) by default

■ key
key is the key that does the job by combining important keys

■ fn
Its value must be a function. This function is executed when a shortcut is used

An example

For example, we want to move to the Google page when the shortcut ( Ctrl + Shift + G ) is executed :

new shortcut({
  ctrl: true,
  shift: true,
  key: "G",
  fn: () => {
    window.open("https://google.com")
  }
})

Or we have a function ( closeAllTabs ) and we want it to run when the shortcut ( alt + c ) is used :

new shortcut({
  alt: true,
  key: "c",
  fn: closeAllTabs
})

Helper Function

If you want to create a shortcut but do not know how to enter the key value, by calling the function ( showKeyInfo() ), every time you press it,
the corresponding key will be displayed in the console (log)

showKeyInfo()

Coverage

---------------------|---------|----------|---------|---------|-------------------------------------
File                 | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
---------------------|---------|----------|---------|---------|-------------------------------------
All files            |   20.28 |      100 |       0 |   20.28 |
 easyShortcut.min.js |   20.28 |      100 |       0 |   20.28 | ...,186-190,193-197,200-205,208-211
---------------------|---------|----------|---------|---------|-------------------------------------