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

javascript jquery triggers wysiwyg keycode

17,277

Solution 1

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.

Solution 2

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'); 
      }          
});

Solution 3

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.

17,277

Author by

itsme

Updated on June 17, 2022

Comments

itsme almost 2 years

i was wondering how do i trigger the event keyCode composed by Ctrl+z and the event keycode composed by Ctrl+Shift+z ?
Mohsen over 12 years

I saw your edit. It's good now. Still ctrl+shift+z fires ctrl+z. This is fix: jsfiddle.net/pZgB2/2
aziz punjani over 12 years

Good point, edited. Had my else if backwards before. Side note, keyup would work too.
Mohsen over 12 years

key up is working if you keep pushing other keys. Not good UX :)
aziz punjani over 12 years

Can you clarify ? Think of this in context of an editor, pressing ctrl + z would revert.
itsme over 12 years

@Interstellar_Coder sorry i red too fast, what i need is not how to detect the event keycode, is "how do i trigger" the keycode events specified .. :)
aziz punjani over 12 years

You can't trigger those events, it wouldn't be good from a browser security standpoint. You'd either have to rely on the specific browser implementation or write your own custom solution to persist different states in time.
itsme over 12 years

uhm can't understand the security problem ... i have a simple textarea then i need 2 links for triggering crtl+z and ctrl+shift+z for repeat or turn back changes on text inside the textarea ... where is the security problem? :/
itsme over 12 years

@Interstellar_Coder if i can't which is the good solution which all wysiwyg plugins uses to revert or repeat changes ina textarea? does they do not trigger the keycodes below?
itsme over 12 years

i mean the classics Undo & Redo buttons :P
aziz punjani over 12 years

The reason browsers don't give you access to those events is because you could override the user e.g a malicious script to undo everything you have done. Like i said you will have to write your own implementation if you want this. If you do find a way to trigger these events i'd be interested to know how you managed to do it. I think most wysiwyg editors just rely on the browser implementation as this is good enough for them.
Mohsen over 10 years

@azizpunjani oh sorry your free code source didn't work this time. Maybe you need to read documentations!