Überprüfen Sie Strg/Shift/Alt-Taste auf 'Klick' Ereignis

Question

Wie konnte ich identifizieren, dieCtrl/Umschalttaste/Alt Schlüssel werden im folgenden Code gedrückt?

$("#my_id").click(function() { 
    if (<left control key is pressed>) { alert("Left Ctrl"); } 
    if (<right shift and left alt keys are pressed>) { alert("Right Shift + Left Alt"); } 
}); 

Answer 1

Nun, das funktioniert nicht in allen Browsern nur IE 8. Microsoft implementiert die Fähigkeit zu bestimmen, welche (rechts/links) Taste gedrückt wurde. Hier ist ein Link http://msdn.microsoft.com/en-us/library/ms534630(VS.85).aspx

Ich fand auch dieses Wunder Artikel über Tastendruck, Keypad, Keydown-Ereignis in Browsern. http://unixpapa.com/js/key.html

$('#someelement').bind('click', function(event){ 

    if(event.ctrlKey) { 
     if (event.ctrlLeft) { 
     console.log('ctrl-left'); 
     } 
     else { 
     console.log('ctrl-right'); 
     } 
    } 
    if(event.altKey) { 
     if (event.altLeft) { 
     console.log('alt-left'); 
     } 
     else { 
     console.log('alt-right'); 
     } 
    } 
    if(event.shiftKey) { 
     if (event.shiftLeft) { 
     console.log('shift-left'); 
     } 
     else 
     { 
     console.log('shift-right'); 
     } 
    } 
    }); 

Answer 2

$('#someelement').bind('click', function(event){ 
    if(event.ctrlKey) 
     console.log('ctrl'); 
    if(event.altKey) 
     console.log('alt'); 
    if(event.shiftKey) 
     console.log('shift'); 

}); 

Ich weiß nicht, ob es für Links-/Rechts-Tasten zu überprüfen innerhalb eines Click-Ereignis möglich ist, aber ich glaube nicht, es möglich ist.

Answer 3

Verwendung js-hotkeys. Es ist ein jQuery-Plugin.

Dies ist ein Test, um zu zeigen, wonach Sie suchen. Es zeigt Ihnen auch, wie Sie die Standardtasten für links, rechts, oben, unten und jene vom numerischen Tastenfeld (das mit Zahlen 2,4,6,8) erfassen können! http://afro.systems.googlepages.com/test-static-08.html

Answer 4

einfacher als alles: Sie keydown Ereignis verwenden, um zu überprüfen, ob es Ctrl (17) oder Shift- (16), verwenden Sie dann Ereignis keyup zu überprüfen, ob es ist Geben Sie (13) und Ctrl oder Shift- vor hit (auf Taste nach unten) abbrechen Ctrl oder Shift- auf jedem keyup aber Geben Sie

Answer 5

Nach my comment ist dies eine mögliche Lösung.

Um zu prüfen, welche spezifische Zusatztaste gedrückt wird, Sie KeyboardEvent Location (see table support)

IE8 nutzen zu unterstützen, zum Glück könnten Sie already posted solution verwenden.

Die Problemumgehung besteht nun darin, ein globales Objekt mit relevanten Eigenschaften zu definieren, die angeben, welche Modifier-Schlüssel gehalten werden. Andere Möglichkeiten ohne globales Objekt wären natürlich möglich.

Hier erfassen ich Ereignis mit relevanten JavaScript-Listener-Methode (jQuery unterstützt keine Erfassungsphase). Wir erfassen Ereignis, um den Fall zu behandeln, dass die Ereignisausbreitung aus irgendeinem Grund durch bereits verwendeten Code gestoppt wird.

/* global variable used to check modifier keys held */ 
 
/* Note: if e.g control left key and control right key are held simultaneously */ 
 
/* only first pressed key is handled (default browser behaviour?)*/ 
 
window.modifierKeys = (function() { 
 
    /* to handle modifier keys except AltGr which is key shortcut for controlRight + alt */ 
 
    var mKeys = {}; 
 
    /* to fire keydown event only once per key held*/ 
 
    var lastEvent, heldKeys = {}; 
 
    // capture event to avoid any event stopped propagation 
 
    document.addEventListener('keydown', function(e) { 
 
    if (lastEvent && lastEvent.which == e.which) { 
 
     return; 
 
    } 
 
    lastEvent = e; 
 
    heldKeys[e.which] = true; 
 
    setModifierKey(e); 
 
    }, true); 
 
    // capture event to avoid any event stopped propagation 
 
    document.addEventListener('keyup', function(e) { 
 
    lastEvent = null; 
 
    delete heldKeys[e.which]; 
 
    setModifierKey(e); 
 
    }, true); 
 

 
    function setModifierKey(e) { 
 
    mKeys.alt = e.altKey; 
 
    mKeys.ctrlLeft = e.ctrlKey && e.location === 1; 
 
    mKeys.ctrlRight = e.ctrlKey && e.location === 2; 
 
    mKeys.shiftLeft = e.shiftKey && e.location === 1; 
 
    mKeys.shiftRight = e.shiftKey && e.location === 2; 
 
    } 
 
    return mKeys; 
 
})(); 
 

 
/* on div click, check for global object */ 
 
$('.modifierKey').on('click', function() { 
 
    console.log(modifierKeys); 
 
    /* for demo purpose */ 
 
    $('.info').text(function() { 
 
    var txt = []; 
 
    for (var p in modifierKeys) { 
 
     if (modifierKeys[p]) txt.push(p); 
 
    } 
 
    return txt.toString(); 
 
    }); 
 
})

/* for demo purpose */ 
 

 
.info:not(:empty) { 
 
    border: 1px solid red; 
 
    padding: .1em .5em; 
 
    font-weight: bold; 
 
} 
 
.info:not(:empty):after { 
 
    content: " held"; 
 
    font-weight: normal; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="modifierKey" tabindex="-1"> 
 
    DIV to catch modifier keys on click 
 
</div> 
 
<br> 
 
<span class="info"></span>

Als Nebennoten:

• ALT GR Schlüssel ist eine Schnelltaste für CTRL-Rechts & ALT Tasten
• gleichzeitig zwei indentical Zusatztasten halten (zB Umschalt-Links & Umschalt-Rigth Tasten), in nur ersten Folge hätte zu behandelt werden (scheint wie Verhalten Standard-Browser, so wie auch immer, scheint recht!)

Answer 6

Es gibt einige Gründe, die rechts und links CTRL, SHIFT & ALT Tasten sind nicht unterscheidbar, da 1. keycodes gleichen 2. Viele Laptop sind Tastaturen können nicht zwei Steuertasten Genommen Referenz: How can I tell if an event comes from right Ctrl key?

Answer 7

e.originalEvent.location kehrt 1 für die linke Taste und 2 für die rechte Taste. Daher können Sie erkennen, welche Taste modifier wie folgt gedrückt wird. Hoffe das wird dir helfen.

var msg = $('#msg'); 
 
$(document).keyup(function (e) { 
 
     if (e.keyCode == 16) { 
 
      if (e.originalEvent.location == 1) 
 
       msg.html('Left SHIFT pressed.'); 
 
      else 
 
       msg.html('Right SHIFT pressed.'); 
 
     } else if (e.keyCode == 17) { 
 
      if (e.originalEvent.location == 1) 
 
       msg.html('Left CTRL pressed.'); 
 
      else 
 
       msg.html('Right CTRL pressed.'); 
 
     } else if (e.keyCode == 18) { 
 
      if (e.originalEvent.location == 1) 
 
       msg.html('Left ALT pressed.'); 
 
      else 
 
       msg.html('Right ALT pressed.'); 
 
     
 
      e.preventDefault(); //because ALT focusout the element 
 
     } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label>Press modifier key: </label> 
 
<strong id="msg"></strong>

Answer 8

In den meisten Fällen die ALT, CTRL und SHIFT Schlüssel booleans arbeiten, um zu sehen, wenn diese Tasten gedrückt wurden. Zum Beispiel:

var altKeyPressed = instanceOfMouseEvent.altKey 

Wenn aufgerufen, wird es wahr oder falsch zurückgeben. Weitere Informationen finden Sie unter https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey

Für zukünftige Referenz gibt es auch eine (nur NS/firefox), die funktioniert, wenn der Metaschlüssel gedrückt wird.

Answer 9

Funktioniert wie ein Charme! und auf Chrome, Firefox, IE, und Edge-auch;) https://jsfiddle.net/55g5utsk/2/

var a=[]; 
function keyName(p){ 
    var cases = {16:'Shift',17:'CTRL',18:'Alt'}; 
    return cases[p] ? cases[p] : 'KeyCode: '+p; 
} 
function keyPosition(p){ 
    var cases = {1:'Left',2:'Right'}; 
    return cases[p] ? cases[p]+' ' : ''; 
} 
$('input').on('keydown',function(e){ 
    a.push(keyPosition(e.originalEvent.location)+keyName(e.keyCode)); 
}) 
$('input').on('keyup',function(){ 
    var c=''; 
    var removeDuplicates = []; 
    $.each(a, function(i, el){ 
     if ($.inArray(el, removeDuplicates) === -1) { 
      removeDuplicates.push(el); 
      c=c+(el)+' + '; 
     } 
    }); 
    a=[]; 
    alert(c.slice(0, -3)) 
}); 

Folgen, eine Version mit dem Click-Ereignis http://jsfiddle.net/2pL0tzx9/

var a=[]; 
function keyName(p){ 
    var cases = {16:'Shift',17:'CTRL',18:'Alt'}; 
    return cases[p] ? cases[p] : ''; 
} 
function keyPosition(p){ 
    var cases = {1:'Left',2:'Right'}; 
    return cases[p] ? cases[p]+' ' : ''; 
} 
$(document).on('keydown',function(e){ 
    a.push(keyPosition(e.originalEvent.location)+keyName(e.keyCode)); 
}) 
$('#my_id').on('click',function(){ 
    var c=''; 
    var removeDuplicates = []; 
    a =a.filter(function(v){return v!==''}); 
    $.each(a, function(i, el){ 
     if ($.inArray(el, removeDuplicates) === -1){ 
      removeDuplicates.push(el); 
      c=c+(el)+' + '; 
     } 
    }); 
    if (c) alert(c.slice(0, -3)); 
    a=[]; 
});