jQuery Trigger keyCode wysiwyg textarea中的Ctrl + Shift + z和Ctrl + z

我想知道如何觸發由Ctrl+z組成的事件keycode和由Ctrl+Shift+z組成的事件keycode？jQuery Trigger keyCode wysiwyg textarea中的Ctrl + Shift + z和Ctrl + z

來源

2011-10-12 sbaaaang

爲更好的解釋我想知道如何創建經典的撤消和重做按鈕爲一個wysiwyg textarea ...最佳實踐 – sbaaaang

如果要觸發事件，那麼它應該是這樣的：

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

但它似乎不起作用。我沒有更多時間花在這上面，但是這是一個安全問題。我會在MSDN，W3C和MDN看到這些文檔，看看是否有真正的方法來做到這一點。

來源

2011-10-13 19:20:03 Mohsen

thx沒問題的人！ ;） – sbaaaang

所以這一切的代碼，它不工作？重點是什麼。 –

@azizpunjani哦，對不起，你的免費代碼源這次沒有工作。也許你需要閱讀文檔！ – Mohsen

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

來源

2011-10-12 23:04:52

你甚至測試過這個代碼？這是行不通的 – Mohsen

小提琴http://jsfiddle.net/pZgB2/1/ –

我看到了你的編輯。現在很好。仍按ctrl + shift + z激發ctrl + z。這是修復：http://jsfiddle.net/pZgB2/2/ – Mohsen

Ctrl和Shift鍵包括在鍵盤事件中，但鍵碼是裁判您按下哪個鍵。 Ctrl和Shift是控制鍵，它們在按鍵事件中有自己的鍵。

例如，如果你按Ctrl+Shift+Z然後keydown事件會是這樣：

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

注意：您要聽多個鍵的鍵盤快捷鍵。 keyup不起作用。

來源

2011-10-12 23:09:15 Mohsen

jQuery Trigger keyCode wysiwyg textarea中的Ctrl + Shift + z和Ctrl + z

回答

相關問題