2010-09-23 8 views
69

Ich habe ein Anker-Tag, das eine JavaScript-Funktion aufruft.JQuery oder JavaScript: Wie bestimmen Sie, ob die Shift-Taste gedrückt wird, während Sie auf den Anchor-Tag-Hyperlink klicken?

Mit oder ohne JQuery Wie kann ich feststellen, ob die Umschalttaste gedrückt ist, während auf die Verknüpfung geklickt wird?

Der folgende Code funktioniert NICHT, da der Tastendruck nur ausgelöst wird, wenn eine "echte Taste" (nicht die Shift-Taste) gedrückt wird. (Ich hatte gehofft, es würde ausgelöst, wenn nur die Shift-Taste allein gedrückt wurde.)

var shifted = false; 

$(function() {       
    $(document).keypress(function(e) { 
     shifted = e.shiftKey; 
     alert('shiftkey='+e.shiftkey); 
    }); 

    $(document).keyup(function(e) { 
     shifted = false; 
    }); 
} 

... 

function myfunction() { 
    //shift is always false b/c keypress not fired above 
} 
+3

der folgende Code auch nicht funktioniert, weil Sie 'shiftkey' statt' getippt shiftKey' :-) –

+0

Wenn Sie das wissen Aufruf des Handlers zu vermeiden, wenn 'shift + click' drücken, danach mit [' filter-changed-clicks'] (https://github.com/bfredit-it/filter-altered-clicks) –

Antwort

23

für Mausereignisse, ich weiß, dass in Firefox zumindest die „shiftKey“ Eigenschaft auf dem Event-Objekt wird Ihnen sagen, wenn die Verschiebung Taste ist gedrückt. Es ist bei MSDN dokumentiert, aber ich habe es nicht für immer ausprobiert, so erinnere ich mich nicht, wenn IE dies richtig macht.

Sie sollten also in der Lage sein, in Ihrem "click" -Handler nach "shiftKey" auf dem Ereignisobjekt zu suchen.

+1

In der Tat. Dies ist der Fall, der bis in die Anfänge von JavaScript zurückreicht. – bobince

6

Das keypress Ereignis wird nicht von allen Browsern ausgelöst, wenn Sie oder ctrl Verschiebung klicken, aber zum Glück the keydown event is. Wenn Sie die keypress mit keydown ausschalten, haben Sie vielleicht mehr Glück.

+1

Nun, aber das Problem ist, dass er nicht sicher weiß, ob die Shift-Taste gedrückt wird. Oh, aber ich denke, wenn die Flagge auch für "keyUp" gesetzt ist, dann wäre es möglich zu erkennen, wenn "click" durch die Schlüsselereignisse geklammert ist. – Pointy

79
$(document).on('keyup keydown', function(e){shifted = e.shiftKey}); 
+18

Dies funktionierte für mich, aber unterbrach alle Standardverknüpfungen, die nicht "shift" beinhalteten, da die Funktion 'false' zurückgibt. Ich musste explizit 'true' zurückgeben, um crtl + r, ctrl + s, ctrl + p usw. zu erlauben. –

+2

So ist der Vorschlag, Keydown anstelle von Tastendruck zu verwenden. – rwitzel

54

Hier ist der Schlüsselcode für jeden Schlüsselstrich in JavaScript. Sie können das verwenden und feststellen, ob der Benutzer die Umschalttaste gedrückt hat.

backspace   8 
tab     9 
enter    13 
shift    16 
ctrl    17 
alt     18 
pause/break   19 
caps lock   20 
escape    27 
page up    33 
page down   34 
end     35 
home    36 
left arrow   37 
up arrow   38 
right arrow   39 
down arrow   40 
insert    45 
delete    46 
0     48 
1     49 
2     50 
3     51 
4     52 
5     53 
6     54 
7     55 
8     56 
9     57 
a     65 
b     66 
c     67 
d     68 
e     69 
f     70 
g     71 
h     72 
i     73 
j     74 
k     75 
l     76 
m     77 
n     78 
o     79 
p     80 
q     81 
r     82 
s     83 
t     84 
u     85 
v     86 
w     87 
x     88 
y     89 
z     90 
left window key  91 
right window key 92 
select key   93 
numpad 0   96 
numpad 1   97 
numpad 2   98 
numpad 3   99 
numpad 4   100 
numpad 5   101 
numpad 6   102 
numpad 7   103 
numpad 8   104 
numpad 9   105 
multiply   106 
add     107 
subtract   109 
decimal point  110 
divide    111 
f1     112 
f2     113 
f3     114 
f4     115 
f5     116 
f6     117 
f7     118 
f8     119 
f9     120 
f10     121 
f11     122 
f12     123 
num lock   144 
scroll lock   145 
semi-colon   186 
equal sign   187 
comma    188 
dash    189 
period    190 
forward slash  191 
grave accent  192 
open bracket  219 
back slash   220 
close braket  221 
single quote  222 

Nicht alle Browser behandeln die Tastendruck-Ereignis gut, so dass entweder die Taste oder die Taste gedrückt Ereignis, wie folgt aus:

$(document).keydown(function (e) { 
    if (e.keyCode == 16) { 
     alert(e.which + " or Shift was pressed"); 
    } 
}); 
+0

Ausgezeichnete Antwort! Die beste ... – MAChitgarha

+0

plus 1 für den Aufwand in diese Antwort –

+0

Verwenden Sie 'event.key' statt! Es wird dir den Char direkt geben, zB: "a", "1", "LeftArrow" – Gibolt

19

Ich hatte ein ähnliches Problem, versuchen, eine ‚Verschiebung zu erfassen + klick ', aber da ich ein Drittanbieter-Steuerelement mit einem Rückruf anstelle des Standardhandlers click verwendet habe, hatte ich keinen Zugriff auf das Ereignisobjekt und seine zugehörige .

Ich beendete das Mouse Down-Ereignis, um die Shift-Ness aufzuzeichnen und dann später in meinem Callback zu verwenden.

var shiftHeld = false; 
    $('#control').on('mousedown', function (e) { shiftHeld = e.shiftKey }); 

Posted nur für den Fall, dass jemand anderes hier auf der Suche nach einer Lösung für dieses Problem endet.

3

Die ausgezeichnete JavaScript-Bibliothek KeyboardJS verarbeitet alle Arten von Tastendrücken einschließlich der UMSCHALTTASTE. Es erlaubt sogar die Angabe von Tastenkombinationen wie zum Beispiel das erste Drücken von STRG + x und dann a.

KeyboardJS.on('shift', function() { ...handleDown... }, function() { ...handleUp... }); 

Wenn Sie eine einfache Version wollen, Leiter der answer by @tonycoupland):

var shiftHeld = false; 
$('#control').on('mousedown', function (e) { shiftHeld = e.shiftKey }); 
+0

@ downvoters: Bitte hinterlasse einen Kommentar warum du runterlädst – koppor

0
var shiftDown = false; 
this.onkeydown = function(evt){ 
    var evt2 = evt || window.event; 
    var keyCode = evt2.keyCode || evt2.which;  
    if(keyCode==16)shiftDown = true; 
} 
this.onkeyup = function(){ 
    shiftDown = false; 
} 

demo

2

Dies funktioniert gut für mich:

function listenForShiftKey(e){ 
    var evt = e || window.event; 
    if (evt.shiftKey) { 
     shiftKeyDown = true; 
    } else { 
     shiftKeyDown = false; 
    } 
} 
4

Ich habe verwendete eine Methode zu tes t, wenn eine bestimmte Taste durch Speicher die aktuell gedrückte Tastencodes in einem Feld gedrückt wird:

var keysPressed = [], 
    shiftCode = 16; 

$(document).on("keyup keydown", function(e) { 
    switch(e.type) { 
     case "keydown" : 
      keysPressed.push(e.keyCode); 
      break; 
     case "keyup" : 
      var idx = keysPressed.indexOf(e.keyCode); 
      if (idx >= 0) 
       keysPressed.splice(idx, 1); 
      break; 
    } 
}); 

$("a.shifty").on("click", function(e) { 
    e.preventDefault(); 
    console.log("Shift Pressed: " + (isKeyPressed(shiftCode) ? "true" : "false")); 
}); 

function isKeyPressed(code) { 
    return keysPressed.indexOf(code) >= 0; 
} 

Here is the jsfiddle

+2

Coole Lösung, aber es braucht eine kleine Korrektur auf keyup: while (idx> = 0) { \t \t \t \t \t keysPressed.splice (idx, 1); \t \t \t \t \t idx = avpg.keysPressed.IndexOf (e.keyCode); \t \t \t \t} Andernfalls wird nur das erste Auftreten eines Tastendrucks entfernt. Um dies zu bemerken, halten Sie die Umschalttaste einige Sekunden gedrückt. Das Array wird mit Shift-Codes gefüllt, aber nur einer von ihnen wird beim Key-up entfernt. – pkExec

2

Ein modularer Ansatz sowie die Möglichkeit, Ihren this Umfang in dem Hörer zu halten:

var checkShift = function(fn, self) { 
    return function(event) { 
    if (event.shiftKey) { 
     fn.call(self, event); 
    } 
    return true; 
    }; 
}; 

$(document).on('keydown', checkShift(this.enterMode, this)); 
0

Wenn jemand nach einem bestimmten Schlüssel sucht und den Status der "Modifikatoren" (wie sie in Java genannt werden) wissen muss, dh Umschalt-, Alt- und Steuertasten, können Sie etwas tun, das aufreagiertauf Taste F9, aber nur, wenn keine der Tasten Shift, Alt oder Strg gedrückt wird.

jqMyDiv.on('keydown', function(e){ 
    if(! e.shiftKey && ! e.altKey && ! e.ctrlKey){ 
     console.log(e); 
     if(e.originalEvent.code === 'F9'){ 
      // do something 
     } 
    } 
}); 
Verwandte Themen