JQuery ou JavaScript: como determinar se a tecla shift está sendo pressionada ao clicar no hiperlink da marca âncora?

92

Eu tenho uma tag âncora que chama uma função JavaScript.

Com ou sem JQuery, como posso determinar se a tecla shift está pressionada enquanto o link é clicado?

O código a seguir NÃO funciona porque o pressionamento de tecla só é acionado se uma "tecla real" (não a tecla shift) for pressionada. (Eu esperava que ele disparasse se apenas a tecla shift fosse pressionada.)

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
}
Pete Alvin
fonte
4
o código a seguir também não funciona porque você digitou em shiftkeyvez de shiftKey:-)
Simon_Weaver
Se você precisa saber isso para evitar chamar o manipulador ao pressionar shift+click, usefilter-altered-clicks
fregante 10/10/2016

Respostas:

100
    $(document).on('keyup keydown', function(e){shifted = e.shiftKey} );
hluk
fonte
21
Isso funcionou para mim, mas interrompeu todos os atalhos padrão que não envolviam shiftdesde o retorno da função false. Eu precisava permitir explicitamente return truecrtl + r, ctrl + s, ctrl + p etc.
John H
4
Portanto, a sugestão é usar keydown em vez de keypress.
rwitzel
Estranho, recebo apenas eventos keydown, sem keyup.
Gerry de
@rwitzel keydown e keyup permitem que você acompanhe o estado real da tecla shift à medida que são acionadas para cada tecla do teclado. Nem sempre o keypress é acionado, por exemplo, não é acionado quando apenas a tecla shift é pressionada.
jakubiszon
@Gerry pode ser que haja algum outro manipulador de eventos em sua página que quebra a cadeia de eventos. Verifique primeiro uma página em branco / nova (que não inclua todos os seus scripts) - ela funcionará perfeitamente.
jakubiszon
74

Aqui está o código de cada tecla em JavaScript. Você pode usar isso e detectar se o usuário pressionou a tecla Shift.

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

Nem todos os navegadores lidam bem com o evento keypress, então use o evento key up ou key down, assim:

$(document).keydown(function (e) {
    if (e.keyCode == 16) {
        alert(e.which + " or Shift was pressed");
    }
});
Jsinh
fonte
mais 1 pela quantidade de esforço dedicado a esta resposta
Ian Wise
Use em seu event.keylugar! Ele fornecerá o caractere diretamente, por exemplo: "a", "1", "LeftArrow"
Gibolt
Ainda melhor em sua versão VanillaJS:document.addEventListener("keydown", function(e){ console.log(e.which); });
Evgeny
26

Para eventos de mouse, sei que, no Firefox, pelo menos a propriedade "shiftKey" no objeto de evento informará se a tecla shift está pressionada. Está documentado no MSDN, mas não o experimento há muito tempo, então não me lembro se o IE faz isso direito.

Portanto, você deve ser capaz de verificar se há "shiftKey" no objeto de evento em seu manipulador de "clique".

Pontudo
fonte
2
De fato. Esse é o caso desde os primeiros dias do JavaScript.
bobince
23

Tive um problema semelhante ao tentar capturar um 'shift + clique', mas como estava usando um controle de terceiros com um retorno de chamada em vez do clickmanipulador padrão , não tive acesso ao objeto de evento e seus associados e.shiftKey.

Acabei manipulando o evento do mouse para baixo para registrar a mudança e, em seguida, usando-o mais tarde em meu retorno de chamada.

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

Postado para o caso de alguém vir aqui em busca de uma solução para esse problema.

Tonycoupland
fonte
7

O keypressevento não é disparado por todos os navegadores quando você clica em shiftou ctrl, mas felizmente o keydownevento é .

Se você trocar o keypresscom, keydowntalvez tenha mais sorte.

Chris Van Opstal
fonte
1
Bem, mas o problema é que ele não saberá com certeza se a tecla shift está pressionada. Ah, mas acho que se o sinalizador também estiver definido como "keyUp", será possível detectar quando "click" está entre colchetes pelos eventos principais.
Pointy
6

Usei um método para testar se alguma tecla específica foi pressionada, armazenando os códigos de tecla pressionados atualmente em uma matriz:

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

Aqui está o jsfiddle

Corey
fonte
3
Solução legal, mas precisa de uma pequena correção no keyup: while (idx> = 0) {keysPressed.splice (idx, 1); idx = avpg.keysPressed.indexOf (e.keyCode); } Caso contrário, apenas a primeira ocorrência de um pressionamento de tecla será removida. Para perceber isso, mantenha a tecla shift pressionada por alguns segundos. A matriz é preenchida com códigos de deslocamento, mas apenas um deles é removido na ativação.
pkExec
4

A excelente biblioteca JavaScript KeyboardJS lida com todos os tipos de pressionamento de tecla, incluindo a tecla SHIFT. Ele ainda permite especificar combinações de teclas, como primeiro pressionar CTRL + x e, em seguida, a.

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

Se você quiser uma versão simples, vá para a resposta de @tonycoupland ):

var shiftHeld = false;
$('#control').on('mousedown', function (e) { shiftHeld = e.shiftKey });
koppor
fonte
@downvoters: Por favor, deixe um comentário sobre o motivo do seu downvoters
koppor
3

Isso funciona muito bem para mim:

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

Para verificar se a tecla shift é pressionada enquanto clica com o mouse , existe uma propriedade exata no objeto de evento de clique : shiftKey (e também para ctrl e alt e meta key): https://www.w3schools.com/jsref/event_shiftkey .asp

Então, usando jQuery:

$('#anchor').on('click', function (e) {
    if (e.shiftKey) {
        // your code
    }
});
Bugovicsb
fonte
2

Uma abordagem mais modular mais a capacidade de manter seu thisescopo nos ouvintes:

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

$(document).on('keydown', checkShift(this.enterMode, this));
Rob Fox
fonte
1

Se alguém está procurando detectar uma determinada tecla e precisa saber o status dos "modificadores" (como são chamados em Java), ou seja, as teclas Shift, Alt e Control, você pode fazer algo assim, que responde à keydowntecla F9, mas apenas se nenhuma das teclas Shift, Alt ou Control estiver pressionada no momento.

jqMyDiv.on( 'keydown', function( e ){
    if( ! e.shiftKey && ! e.altKey && ! e.ctrlKey ){
        console.log( e );
        if( e.originalEvent.code === 'F9' ){
          // do something 
        }
    }
});
roedor de microfone
fonte
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


fonte