Creating a shortcut keys for a specific buttons on the webpage | chrome

Question

Assume that i have two pages: Client page

Items page

in both pages i have an Add buttons, is it possible to create a shortcut keys like ctrl + A will click on the Add button and ctrl + B will be for submitting and ctrl + E for new Entity ?

Answer 1

A simple way to detect multiple keydowns to use as shortcuts:

let keysDown = {};
window.onkeydown = function(e) {
  keysDown[e.key] = true;

  if (keysDown["Control"] && keysDown["a"]) {
    //do what you want when control and a is pressed for example
    console.log("control + a");
  }
  else if( keysDown["Control"] && keysDown["b"] ){
    console.log("control + b");
  }
}

window.onkeyup = function(e) {
  keysDown[e.key] = false;
}

Answer 2

Yes, this is definitely possible!

You can build the code yourself, but there is no point in reinventing the wheel, so try one of pre-build libraries. For example: https://craig.is/killing/mice

You can create custom shortcuts and bind them to javascript functions. These functions will than process the action.

Good luck!

Also see: How can I add a JavaScript keyboard shortcut to an existing JavaScript Function?

Answer 3

I have developed custom script to achieve this feature by just adding class

Example: <button type="button" class="ctrl-p">Custom Print</button>

Here Check it out https://jsfiddle.net/RaviMakwana/k6zL1q9t/

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){
 if(banner.hasClass("alt"))
   banner.removeClass("alt")
  else
   banner.addClass("alt")
})

$(document).ready(function(){
 $(document).on('keydown', function (e) {
        
         if (e.ctrlKey) {
            $('[class*="ctrl-"]:not([data-ctrl])').each(function (idx, item) {
                var Key = $(item).prop('class').substr($(item).prop('class').indexOf('ctrl-') + 5, 1).toUpperCase();
                $(item).attr("data-ctrl", Key);
                $(item).append('<div class="tooltip fade top in tooltip-ctrl alter-info" role="tooltip" style="margin-top: -61px; display: block; visibility: visible;"><div class="tooltip-arrow" style="left: 49.5935%;"></div><div class="tooltip-inner"> CTRL + ' + Key + '</div></div>')
            });
        }
         
        if (e.ctrlKey && e.which != 17) {
            var Key = String.fromCharCode(e.which).toLowerCase();
            if( $('.ctrl-'+Key).length == 1) {
                e.preventDefault();
                if (!$('#divLoader').is(":visible"))
                    $('.ctrl-'+Key).click();
                console.log("You pressed ctrl + "+Key );
            }
        }
    });
    $(document).on('keyup', function (e) {
  if(!e.ctrlKey ){
          $('[class*="ctrl-"]').removeAttr("data-ctrl");
            $(".tooltip-ctrl").remove();
        }
    })
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

#banner-message span {
  padding: 20px;
  font-size: 15px;
  text-align: center;
  margin: 0 auto;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="banner-message">
  <p>Hello World</p>
  <button class="ctrl-s" title="s">Change color</button><br/><br/>
  <span>Press CTRL+S to trigger click event of button</span>
</div>