Create and manage custom hotkeys

In this post I am going to discuss about how to manage custom hot keys properly.Now days most of the client asking for the website own key configuration. Like for pressing ctrl+s save the work or ctrl+a to open a new page. For all these kind of job we need to setup custom key combination for the website.

Technically we need to stop the browser default property and need to run our own functions. Like ctrl+s for saving the web page but we need to stop the browser default properties and run the JavaScript function which will hit the service or backend code.
Now in the market we have several custom hotkeys libraries. We can any of them. This this post I am going to work with jquery.hotkeys. They have provided a nice example with all key configuration, please check the here.
Check the plugins Download the plugins

How to call the function

Its very easy to use the jquery.hotkeys you just need to add library at the footer and create a document load function like.

Return false will stop the browser default actions.
You also can bind the function on keyup and keypress but these two function are unable to stop the default browser activity.

How to manage keys and use them repeatedly

Now practically we think about the config keys and you don’t want to stop the browser default properties and set a custom key configuration then you have a sort version of key set. Like you cant use the ctrl+ any key combination as these keys are user by the browsers for different activity. No we also unable to run a function on direct key press and shift+any keys because it will make conflict with user input and their provision for content entry.
So we have some minimum option with alt keys. As alt keys are not widely used by the browser although we have some option like alt keys like browser privacy setting with atl+f or reload alt+r.
So we shared the cakes too much and now are hungry, we need to use the keys again and again so that we can fulfill all the requirement. Also we can fix that one key for one user only. Like ctrl +x for closing the popups. For all the popupswe need to close the div by pressing ctrl+x.We can devide our custom hotkeys into 2 division like global and repeat.

1. Global

   For global we can we can setup all those keys which will use globally like we need to show massage by press alt+s. So we can anywhere in the page and pressing alt+s and the massage will show.
   So these keys will be focus independent.
   

2. Repeat

   These keys will be repeated keys like we need we need to swap a panel by pressing alt+s. So we need to focus the div and then press alt+s for swapping.
   Now assuming that we have only 2 panels for swap. For rest of the panel we can use alt+s for make the color change.
   Make seance? I think you need an example but make sure don’t conflict the keys. Don't assign the keys in both sections.

Example

I have prepared a HTML with 4 panel with bootstrap CSS framework.

Now my intention to use a single key and run different function for different panel. I have put tabindex for every panel with increasing order 1-4 which will focusing by default on keypress of tab.

So the function is easy, on alt+x adding a class to the focused element which will add a border to it. Also I want to remove the class if anyone change the focus. The way to change the focus by hitting tab or click on the panel.
I combine a function with tab if press tab then the border will remove.

Now the function is ready and the class will remove on the press of tab without preventing the default functionality of tab.
Now I am going to show some advanced thing with a combination of alt+a combination run 4 different function depending on the focus div.
I have create a html structure as.

I have added data-action on each div and with their function name like on the first div we need to change background color next one need to rotate, then swap and the last one need to hide.
So I prepared a function with alt+a combination which with take the data-action value and send to a new function which will run the design action.

The new function is the performAction with 2 argument action and the focus object and the function is.

Its working fine. Please download the files from the below link and test from your side. Please let me know if you have any issue, we are more than happy to help.

Download the files

Thanks for visiting.Please support us by shearing our posts and like your social pages.
Please subscribe for our future posts.