¿Cómo puedo verificar si se presiona una tecla durante el evento de clic con jQuery?

105

Me gustaría capturar un evento de clic con jQuery y poder saber si se presionó una tecla al mismo tiempo para poder bifurcar dentro de la función de devolución de llamada en función del evento de pulsación de tecla.

Por ejemplo:

$("button").click(function() {
    if([KEYPRESSED WHILE CLICKED]) {
        // Do something...
    } else {
        // Do something different...
    }
});

¿Es esto posible en absoluto o cómo se puede hacer si es posible?

daniel smith
fuente

Respuestas:

174

Puede detectar fácilmente las teclas shift, alt y control desde las propiedades del evento;

$("button").click(function(evt) {
  if (evt.ctrlKey)
    alert('Ctrl down');
  if (evt.altKey)
    alert('Alt down');
  // ...
});

Consulte quirksmode para obtener más propiedades. Si desea detectar otras claves, consulte la respuesta de cletus .

kkyy
fuente
3
No veo esa propiedad en el objeto de evento jQuery: api.jquery.com/category/events/event-object
cletus
1
Bueno, como dice la página, "La mayoría de las propiedades del evento original se copian y se normalizan en el nuevo objeto de evento". ctrlKey, altKey, etc.son parte del estándar ecmascript (consulte el primer enlace en la página de la API de jquery antes mencionada), por lo que (al menos en navegadores decentes) el objeto de evento generalmente también tiene esas propiedades establecidas.
kkyy
3
El modo Quirks solo dice que estos se definen en un evento clave ... sin mencionar un evento de mouse.
6
Incluso puede detectar la tecla de comando de Mac OS X usando if (e.metaKey) alert('Command down'). Aquí hay un buen artículo sobre eventos clave en JS unixpapa.com/js/key.html
F Lekschas
48

Necesita rastrear por separado el estado de la clave usando keydown()y keyup():

var ctrlPressed = false;
$(window).keydown(function(evt) {
  if (evt.which == 17) { // ctrl
    ctrlPressed = true;
  }
}).keyup(function(evt) {
  if (evt.which == 17) { // ctrl
    ctrlPressed = false;
  }
});

Consulte la lista de códigos clave . Ahora puedes comprobar que:

$("button").click(function() {
  if (ctrlPressed) {
    // do something
  } else {
    // do something else
  }
});
cletus
fuente
6
Un lado negativo de este método (no es que conozca una mejor manera) es que si está detectando la tecla ALT y el usuario ALT-Tabs a otra ventana, entonces el navegador no detecta el evento keyup porque ocurrió en otra aplicación . A partir de ese momento, jquery piensa que la clave está presionada, hasta que ingresan dentro de su aplicación jquery. Esto solo importa con la tecla ALT, por lo que puedo imaginar.
Flat Cat
1
Para Mac OS X eso sería Cmd-Tab, pero creo que el principal aún se mantiene
murftown
1
O Ctrl + Tab para cambiar la pestaña del navegador
Seeven
9

Pude usarlo solo con JavaScript

 <a  href="" onclick="return Show(event)"></a>

  function Show(event) {
            if (event.ctrlKey) { 
                 alert('Ctrl down');
            }
     }
Arun Prasad ES
fuente
1
Además de eso, hice un pequeño ajuste y un bolígrafo: codepen.io/vr_driver/pen/YRoRYO
vr_driver
3

Sin robar el trueno de @Arun Prasad , aquí hay un fragmento de JS puro que repetí para detener la acción predeterminada, que de lo contrario abriría una nueva ventana si se presiona CTL + clic.

function Show(event) 
{
  if (event.ctrlKey) 
  {
    alert('Ctrl held down which clicked');
  } 
  else 
  {
    alert('Ctrl NOT pressed');
  }
  return false
}
<p>Hold down CTL on the link to get a different message</p>

<a href="" onclick="return Show(event)">click me</a>

vr_driver
fuente