Creating a shortcut keys for a specific buttons on the webpage | chrome
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;}
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?
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 elementsvar banner = $("#banner-message")var button = $("button")// handle click and add classbutton.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>