Creating a vanilla Js keyboard shortcut for Wordpress control panel for all WP websites I work on

I’m trying to create a shortcut for wp-admin via ctrl+alt+A. Yet the following code doesn’t work in vanilla Js. Maybe either keydown/keyDown and keyCode aren’t suitable to vanilla?

(function() {
documet.addEventListener('keydown', function(e) {
if (e.target.keyCode == 65 && e.ctrlKey && e.altKey) {
location.href = location.origin + '/wp-admin/';
}
});
})();

I run it in Chrome with Tampermonkey in Win10.

Have you checked for errors in your console? The first thing that needs attention is the typo in first line of the function.

I should have checked that. No doubt. As a newbie, I will cherish to check it more often, even when Greasmoneky reports no problem.

I now fixed the typo, saved, did CTRL+F5 and ran the code but it still seem not to work and there is no error in the console, even when the match is // @match *://*/* and the script is clearly running.

To get this working you need to change e.target.keyCode to e.keyCode. Be aware, though, that the keyCode property is deprecated and so ideally you should be using the code property (if you don’t have to support old browsers).

1 Like

Now it works. Allow me just to learn from you, please @fretburner , why should we remove the target? I mean, doesn’t the target mean “target the event”? (in this case, represented by the letter e)

Or target means something else? (I took that “target” event property from the Jq code btw).

I believe I now understand it:

Given we manually targeted the relevant keydown with keyCode as what’s targeted when the event (e) is triggered — There’s no need to target anything else with “target”.

The target property is a reference to the element that emitted the event.

Oh, so I could otherwise conclude that given we don’t effect this element, we don’t need the target.

Look at this code. It has a closure check() function inside and you must consider the querie of the keypress eg a+ctrl+alt ctrl+a+alt alt+ctrl+a a+alt+crtl
This code works for all combinations

var flag=new Array();
 var keyCodes=[17,18,65];
 window.addEventListener('keydown', function(e) {  
  var a=e.keyCode; 
   function check(arg){
   for(var i=0;i<keyCodes.length;i++){    
     if(arg===keyCodes[i]){
       keyCodes.splice(i,1);
       return flag.push(true);
     }
   } 
  }
  check(a);
  if(flag[0]===true && flag[1]===true && flag[2]===true){
  location.href = location.origin + '/wp-admin/';  
   keyCodes=[17,18,65];
   flag=[];
  }
});
1 Like

And to be more accurate I add a time check-reset because if someone delay to push the three buttons in a specific time window then the code is going to reset all the proccess:

var flag=new Array();
var keyCodes=[17,18,65];
var timeStart;
 function check(arg){
   for(var i=0;i<keyCodes.length;i++){    
     if(arg===keyCodes[i]){
       keyCodes.splice(i,1);
       return flag.push(true);
     }
   } 
  } 
 
 window.addEventListener('keydown', function(e) {
   var timEnd;
   var a=e.keyCode; 
   check(a);
   if(timeStart==='undefined'){
         timeStart=new Date().getTime();    
    } 
  timEnd=new Date().getTime();
  var dif=timEnd-timeStart;
  if(dif<1000 || dif==0 || isNaN(dif)){
  if(flag[0]===true && flag[1]===true && flag[2]===true){
  location.href = location.origin + '/wp-admin/';
    timeStart='undefined'; 
    keyCodes=[17,18,65];
    flag=[];
  }
  }else{
    timeStart='undefined';
    keyCodes=[17,18,65];
    flag=[]; 
  }
});

Hey @liontas76, you really don’t need all that extra code… the OP’s code will fire the event handler regardless of what order the keys are pressed in, or the delay between them. As long as all three keys are pressed simultaneously at some point, the handler will be triggered.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.