jQuery Trigger keyCode Ctrl+Shift+z & Ctrl+z in wysiwyg textarea

Use e.which which has been normalized cross browser by jquery. 

$(document).keydown(function(e){
      if( e.which === 90 && e.ctrlKey && e.shiftKey ){
         console.log('control + shift + z'); 
      }
      else if( e.which === 90 && e.ctrlKey ){
         console.log('control + z'); 
      }          
});

If you want to trigger the event then it should be something like this:

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <input type=button value=CTRL+SHIFT+Z id=bcsz />
  <input type=button value=CTRL+Z id=bcz />
  <textarea id=t ></textarea>
</body>
</html>

JavaScript

var t = document.getElementById('t'), //textarea
    bcsz = document.getElementById('bcsz'), //button ctrl shift z
    bsz = document.getElementById('bcz'),  // button ctrl z
    csz = document.createEvent('KeyboardEvents'), //ctrl shift z event
    cz = document.createEvent('KeyboardEvents'); // ctrl z event

csz.initKeyboardEvent(
           'keydown', 
           true,     // key down events bubble 
           true,     // and they can be cancelled 
           document.defaultView,  // Use the default view 
           true,        // ctrl 
           false,       // alt
           true,        //shift
           false,       //meta key 
           90,          // keycode
           0
          );  
cz.initKeyboardEvent(
           'keydown', 
           true,     // key down events bubble 
           true,     // and they can be cancelled 
           document.defaultView,  // Use the default view 
           true,        // ctrl 
           false,       // alt
           false,        //shift
           false,       //meta key 
           90,          // keycode
           0
          );  

bcz.addEventListener('click', function(){
  t.dispatchEvent(cz); 
}, false);

bcsz.addEventListener('click', function(){
  t.dispatchEvent(csz); 
}, false);

LOOK AT JSBIN LINK

But it seems it doesn't works. I don't have more time to spend on this, but yeah this is kind of a security issue. I would see these docs at MSDN, W3C and MDN to see if there is a real way to do this.


Ctrl and Shift keys are included in key events but keycode is refereeing to which key you press. Ctrl and Shift are control keys and they have their own keys in key events.

For example if you press Ctrl+Shift+Z then keydown event would be this:

{
    altGraphKey: false
    altKey: false
    bubbles: true
    cancelBubble: false
    cancelable: true
    charCode: 0
    clipboardData: undefined
    ctrlKey: true
    currentTarget: null
    defaultPrevented: true
    detail: 0
    eventPhase: 0
    keyCode: 90
    keyIdentifier: "U+004C"
    keyLocation: 0
    layerX: 0
    layerY: 0
    metaKey: false
    pageX: 0
    pageY: 0
    returnValue: false
    shiftKey: true
    srcElement: HTMLTextAreaElement
    target: HTMLTextAreaElement
    timeStamp: 1318460678544
    type: "keydown"
    view: DOMWindow
    which: 90
    __proto__: KeyboardEvent
}

As you can see there is two key for Ctrl and Shift keys that are true because those keys were pressed while pressing Z.

So you can detect this event like this:

document.addEventListener('keydown', function(event){
  if(event.keyCode == 90 && event.ctrlKey && event.shiftKey){
   // do your stuff
  }
}, false);

Note: You should listen to keydown for multiple key keyboard shortcuts. keyup wouldn't work.

Tags:

Javascript

Triggers

Jquery

Keycode

Wysiwyg

Recent Posts