jQuery Триггер keyCode Ctrl + Shift + z & Ctrl + z в текстовой области - PullRequest
Новая
       11

jQuery Триггер keyCode Ctrl + Shift + z & Ctrl + z в текстовой области

7 голосов
/ 13 октября 2011

Мне было интересно, как мне вызвать keyCode события, состоящий из Ctrl+z, и код ключа события, состоящий из Ctrl+Shift+z?

Ответы [ 3 ]

10 голосов
/ 13 октября 2011

Используйте e.which, который был нормализован в браузере с помощью 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'); 
      }          
});
5 голосов
/ 13 октября 2011

Если вы хотите вызвать событие, оно должно быть примерно таким:

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

СМОТРИТЕ НА ССЫЛКУ JSBIN

Но, похоже, это не работает. У меня нет больше времени на это, но да, это вопрос безопасности. Я хотел бы увидеть эти документы в MSDN , W3C и MDN , чтобы увидеть, есть ли реальный способ сделать это.

3 голосов
/ 13 октября 2011

Клавиши Ctrl и Shift включены в ключевые события, но код клавиши определяет, какую клавишу вы нажимаете.Ctrl и Shift являются управляющими клавишами, и у них есть свои собственные клавиши в ключевых событиях.

Например, если вы нажмете Ctrl+Shift+Z, то событие нажатия клавиши будет следующим: 

{
    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
}

Как видите, есть две клавиши для клавиш Ctrl и Shift, которые являются истиннымипотому что эти клавиши были нажаты при нажатии Z.

Таким образом, вы можете обнаружить это событие следующим образом: 

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

Примечание. Вам следует прослушать keydown для нескольких сочетаний клавиш.keyup не сработает.

...