JQuery o JavaScript: ¿Cómo determinar si se presiona la tecla Mayús mientras se hace clic en el hipervínculo de la etiqueta de anclaje?

92

Tengo una etiqueta de anclaje que llama a una función de JavaScript.

Con o sin JQuery, ¿cómo puedo determinar si la tecla Mayús está presionada mientras se hace clic en el enlace?

El siguiente código NO funciona porque la pulsación de teclas solo se activa si se pulsa una "tecla real" (no la tecla Mayús). (Esperaba que se disparara si solo se presionaba la tecla Mayús).

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
fuente
4
el siguiente código tampoco funciona porque escribió en shiftkeylugar de shiftKey:-)
Simon_Weaver
Si necesita saber eso para evitar llamar al manejador al presionar shift+click, usefilter-altered-clicks
fregante

Respuestas:

100
    $(document).on('keyup keydown', function(e){shifted = e.shiftKey} );
hluk
fuente
21
Esto funcionó para mí, pero interrumpió todos los atajos estándar que no involucraban shiftya que la función regresa false. Necesitaba explícitamente return truepara permitir crtl + r, ctrl + s, ctrl + p etc.
John H
4
Por tanto, la sugerencia es utilizar la pulsación de teclas en lugar de pulsar las teclas.
rwitzel
Extraño, solo obtengo eventos de keydown, no keyup.
Gerry
@rwitzel keydown y keyup le permiten rastrear el estado real de la tecla de mayúsculas a medida que se activan para cada tecla del teclado. La pulsación de teclas no siempre se activa, por ejemplo, no se activa cuando solo se pulsa la tecla Mayús.
jakubiszon
@Gerry podría ser que haya algún otro controlador de eventos en su página que rompa la cadena de eventos. Verifique primero una página en blanco / nueva (una que no incluya todos sus guiones); funcionará perfectamente.
jakubiszon
74

Aquí está el código clave para cada pulsación de tecla en JavaScript. Puede usar eso y detectar si el usuario ha presionado la 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

No todos los navegadores manejan bien el evento keypress, así que use el evento key up o key down, así:

$(document).keydown(function (e) {
    if (e.keyCode == 16) {
        alert(e.which + " or Shift was pressed");
    }
});
Jsinh
fuente
más 1 por la cantidad de esfuerzo invertido en esta respuesta
Ian Wise
¡Úselo en su event.keylugar! Le dará el carácter directamente, por ejemplo: "a", "1", "LeftArrow"
Gibolt
Aún mejor en su versión VanillaJS:document.addEventListener("keydown", function(e){ console.log(e.which); });
Evgeny
26

Para los eventos del mouse, sé que en Firefox al menos la propiedad "shiftKey" en el objeto de evento le dirá si la tecla shift está presionada. Está documentado en MSDN pero no lo he probado desde hace mucho tiempo, así que no recuerdo si IE lo hace bien.

Por lo tanto, debería poder verificar "shiftKey" en el objeto de evento en su controlador de "clic".

Puntiagudo
fuente
2
En efecto. Este ha sido el caso desde los primeros días de JavaScript.
Bobince el
23

Tuve un problema similar al intentar capturar un 'shift + click' pero como estaba usando un control de terceros con una devolución de llamada en lugar del clickcontrolador estándar , no tenía acceso al objeto de evento y su asociado e.shiftKey.

Terminé manejando el evento de mouse down para registrar el shift-ness y luego usándolo más tarde en mi devolución de llamada.

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

Publicado por si acaso alguien más termina aquí buscando una solución a este problema.

Tonycoupland
fuente
7

El keypressevento no es activado por todos los navegadores cuando hace clic en shifto ctrl, pero afortunadamente el keydownevento es .

Si cambia el keypresscon, keydownes posible que tenga mejor suerte.

Chris Van Opstal
fuente
1
Bueno, pero el problema es que no sabrá con certeza si la tecla Mayús está presionada. Oh, pero supongo que si la bandera está configurada para "keyUp" también, entonces sería posible detectar cuando "click" está entre corchetes por los eventos clave.
Puntiagudo
6

He usado un método para probar si se presiona alguna tecla específica almacenando los códigos de tecla presionados actualmente en una 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;
}

Aquí está el jsfiddle

Corey
fuente
3
Buena solución, pero necesita una pequeña corrección en la activación de teclas: while (idx> = 0) {keysPressed.splice (idx, 1); idx = avpg.keysPressed.indexOf (e.keyCode); } De lo contrario, solo se elimina la primera vez que se pulsa una tecla. Para notar esto, mantenga presionada la tecla Mayús durante unos segundos. La matriz se llena con códigos de turno, pero solo uno de ellos se elimina al activar la tecla.
pkExec
4

La excelente biblioteca de JavaScript KeyboardJS maneja todo tipo de pulsaciones de teclas, incluida la tecla MAYÚS. Incluso permite especificar combinaciones de teclas, como presionar primero CTRL + xy luego a.

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

Si desea una versión simple, diríjase a la respuesta de @tonycoupland ):

var shiftHeld = false;
$('#control').on('mousedown', function (e) { shiftHeld = e.shiftKey });
koppor
fuente
@downvoters: Por favor, deje un comentario por qué
votó en contra
3

Esto funciona muy bien para mí:

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

Para verificar si se presiona la tecla shift mientras se hace clic con el mouse , hay una propiedad exacta en el objeto de evento de clic : shiftKey (y también para ctrl y alt y meta key): https://www.w3schools.com/jsref/event_shiftkey .áspid

Entonces usando jQuery:

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

Un enfoque más modular más la capacidad de mantener su thisalcance en los oyentes:

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
fuente
1

Si alguien busca detectar una tecla determinada y necesita conocer el estado de los "modificadores" (como se llaman en Java), es decir, las teclas Shift, Alt y Control, puede hacer algo como esto, que responde a la keydowntecla F9, pero solo si ninguna de las teclas Shift, Alt o Control está presionada actualmente.

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

manifestación


fuente