Aktivieren Sie die Tasten Strg / Umschalt / Alt beim Klicken

78

Wie kann ich feststellen, welche Ctrl / Shift/ AltTasten im folgenden Code gedrückt werden?

$("#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"); }
});
Mischa Moroshko
quelle
@JeremyBanks Sie suchen nach KeyboardEvent Location ( siehe Tabellenunterstützung ) . In jQuery müssen Sie den jq-Ereignis-Wrapper verwenden event.originalEvent.location. Dann ist die Logik, die beim Klicken implementiert werden soll, nicht so schwer. Setzen Sie einfach ein Flag / Objekt für Keydown- / Keyup-Ereignisse und überprüfen Sie es beim Klicken. Das Problem könnte darin bestehen, den altGrSchlüssel zu behandeln, was zu inkonsistenten Ergebnissen führen kann. Wenn ich Zeit habe, werde ich später eine Antwort geben ...
A. Wolff

Antworten:

76

Nun, das funktioniert nicht in allen Browsern, nur in IE 8. Microsoft hat die Möglichkeit implementiert, 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 habe auch diesen Wunderartikel über Tastendruck, Tastendruck und Keydown-Ereignis in Browsern gefunden. 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');
      }
    }
  }); 
John Hartsock
quelle
Entschuldigung, ich habe nicht erwähnt, dass ich an Firefox 3.6.3 interessiert bin. Ich habe die Frage entsprechend aktualisiert.
Mischa Moroshko
Mischa Moroshko. Entschuldigung, aber es gibt noch keine Möglichkeit, dies in Firefox zu tun. Vielleicht wird es in Zukunft "keyLocation", "keyIdentifier" oder "shiftLeft" implementieren ... Ich habe einen wilden Vorschlag, bin mir aber nicht sicher, ob es funktionieren wird. Ich weiß, dass JAVA-Applets rechte und linke Tastenanschläge erkennen können. Wenn Sie den Tastenanschlag im Applet erfassen und dann die rechten / linken Informationen an die Website zurückgeben könnten. Ich kann Ihnen gar nicht sagen, wie das geht. aber es ist eine Idee. Flash kann eine Alternative zu einem JAVA-Applet sein
John Hartsock
Ja, ich dachte du würdest nicht. Aber im Moment ist es einfach nicht möglich, JQuery / HTML DOM und Firefox 3.6.3
John Hartsock
Ebenso könnten Sie es auch mit Flash Actionscript3 tun , aber ich vermute, Sie möchten auch nicht dorthin gehen.
MVChr
Der Quirksmode-Link in einem der anderen Kommentare deutet darauf hin, dass es sich eher um
IE6
40
$('#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 möglich ist, innerhalb eines Klickereignisses nach linken / rechten Tasten zu suchen, aber ich denke nicht, dass dies möglich ist.

jAndy
quelle
1
Shift links und rechts haben beide einen Schlüsselcode von 16. Gleiches gilt für Strg (17) und Alt (18)
9
Ich denke, Sie müssen auf die DOM3-Unterstützung warten, um von links nach rechts unterscheiden zu können. DOM 3 führt event.keyLocation ein ( w3.org/TR/DOM-Level-3-Events/… ).
DaveS
Ist es möglich, dass Firefox 3.6.3 eine Implementierung davon hat?
Mischa Moroshko
2
Es scheint, dass diese Links / Rechts-Funktionen in Firefox noch nicht implementiert sind. Für die Schicht gibt es eine Feature-Anfrage, die Sie markieren könnten: bugzilla.mozilla.org/show_bug.cgi?id=458433 ctrlLeft hat nicht einmal eine Bug- / Feature-Anfrage. Quirksmode-Seite (obwohl keine Informationen zu aktuellen Browsern vorhanden sind): quirksmode.org/dom/w3c_events.html#keyprops
Simon B.
7

e.originalEvent.locationGibt 1 für die linke Taste und 2 für die rechte Taste zurück. So können Sie modifierwie folgt erkennen, welche Taste 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>

Ibrahim Khan
quelle
Ich habe einen kurzen Blick in Chrome geworfen und das gleiche Ergebnis wie Sie erzielt. Verwenden Sie event.locationoder event.keyLocationund möglicherweise einen Fallback auf die event.ctrlLeftSyntax für IE OLDTIMER.
Tokimon
Die Verwendung von event.location ist das einzige, was in Chrome für mich funktioniert hat, um Tasten auf der linken Seite von Tasten auf der rechten Seite zu unterscheiden.
Mac
e.originalEvent.locationIch arbeite sowohl in Chrome als auch in Firefox. @ Mac
Ibrahim Khan
Scheint seltsam zu verwenden keyup... Wenn Sie wissen möchten, ob Ctrlwährend a gedrückt (gedrückt) wurde click, möchten Sie keydownein Flag verwenden und setzen, das Sie dann im Klick-Listener einchecken können. Setzen Sie die Flagge zurück keyup.
Stijn de Witt
7

In den meisten Fällen sind die ALT, CTRLund SHIFTSchlüssel booleans zu sehen , arbeiten , wenn diese Tasten gedrückt wurden. Zum Beispiel:

var altKeyPressed = instanceOfMouseEvent.altKey

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

Zum späteren Nachschlagen gibt es auch einen namens metaKey(nur NS / Firefox), der funktioniert, wenn die Metataste gedrückt wird.

DJHakim
quelle
Dies ist wahrscheinlich die beste Antwort hier. Interessanterweise hat es keine positiven Stimmen.
MarkSkayff
Es ist erwähnenswert, dass diese einfache Lösung möglicherweise fehlschlägt, wenn der Benutzer Linux Mint 18 mit Standardeinstellungen verwendet. Wenn die Betriebssystemeinstellung unter Einstellungen: Windows: Verhalten: Sonderschlüssel zum Verschieben und Ändern der Fenstergröße auf Alt gesetzt ist (wie standardmäßig), wird durch Halten von Alt das clickEreignis nicht ausgelöst und daher die Funktion, die auf die altKeyEigenschaft verweist wird niemals ausgeführt.
Patrick Dark
2

Nach meinem Kommentar ist dies eine mögliche Lösung.

Um zu überprüfen, welche bestimmte Modifizierertaste gedrückt wird, können Sie KeyboardEvent Location verwenden ( siehe Tabellenunterstützung ).

Um IE8 zu unterstützen, können Sie zum Glück bereits veröffentlichte Lösungen verwenden .

Die Problemumgehung besteht nun darin, ein globales Objekt mit relevanten Eigenschaften festzulegen, für die Modifikatortasten gehalten werden. Andere Wege ohne Verwendung eines globalen Objekts wären natürlich möglich.

Hier erfasse ich Ereignisse mit der relevanten Javascript-Listener-Methode (jQuery unterstützt die Erfassungsphase nicht) . Wir erfassen Ereignisse, um Fälle zu behandeln, in denen die keydown/keyupWeitergabe von Ereignissen 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 Randnotizen:

  • ALT GRTaste ist eine Tastenkombination für CTRL-Right& ALT Tasten
  • Wenn Sie gleichzeitig zwei einzelne Modifizierertasten (z. B. Shift-Left- und Shift-Rigth-Tasten) gedrückt halten, wird nur die erste Taste behandelt (scheint das Standardverhalten des Browsers zu sein, scheint also richtig zu sein!).
A. Wolff
quelle
2

Ich dachte nur, ich würde eine Antwort hinzufügen, die für 2020 angemessen ist.


Sie können dies jetzt auch verwenden MouseEvent.getModifierState()- es wird zum Zeitpunkt des Schreibens von den meisten Browsern unterstützt .

document.addEventListener("click", (evn) => {
  const shift = evn.getModifierState("Shift");
  const ctrl = evn.getModifierState("Control");
  const alt = evn.getModifierState("Alt");

  console.log("Mouse pressed! Modifiers:");
  console.table({shift, ctrl, alt});
});

Beispiel

Vorsichtsmaßnahmen:

  • Insbesondere unterscheidet diese API nicht zwischen linken und rechten Modifikatoren. Wenn Sie sich darum kümmern, haben Sie Pech. Aber ich stelle mir vor, dass dies nur für eine kleine Anzahl von Anwendungsfällen von Bedeutung ist.
  • Einer der wichtigsten Vorteile dieser API ist , dass es Modifikatoren andere unterstützt als shift, ctrlund alt. Das spezifische Verhalten ist jedoch auf verschiedenen Betriebssystemen aufgrund angeborener Plattformunterschiede etwas unregelmäßig. Überprüfen Sie hier, bevor Sie sie verwenden.
Cyqsimon
quelle
Ich danke dir sehr. Das ist so viel sauberer!
Austin Burk
0

Einfacher als alles andere: Sie verwenden das Keydown-Ereignis, um zu überprüfen, ob es Ctrl(17) oder Shift(16) ist, und verwenden dann das Keyup-Ereignis, um zu überprüfen, ob es Enter(13) ist, und / Ctrloder Shiftzu drücken, bevor Sie (bei gedrückter Taste) abbrechen Ctrloder Shiftbei einem anderen Keyup alsEnter

Otvazhnii
quelle
0

Klappt wunderbar! und auch auf Chrome, Firefox, IE und Edge;) 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))
});

Es folgt eine Version mit dem Klickereignis 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=[];   
});
Vixed
quelle