javascript - Compruebe las teclas Ctrl/Shift/Alt en el evento ''clic''
jquery html (9)
¿Cómo podría identificar qué teclas Ctrl / Shift / Alt se presionan en el siguiente código?
$("#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"); }
});
¡Funciona de maravilla! y en Chrome, Firefox, IE y Edge también;) 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))
});
A continuación, una versión con el evento click 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=[];
});
Bueno, esto no funcionará en todos los navegadores, solo IE 8. Microsoft implementó la capacidad de determinar qué tecla (derecha / izquierda) se presionó. Aquí hay un enlace http://msdn.microsoft.com/en-us/library/ms534630(VS.85).aspx
También encontré este artículo maravilloso sobre keypress, keyup, keydown event en los navegadores. 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'');
}
}
});
En la mayoría de los casos, los booleanos de teclas ALT , CTRL y SHIFT funcionarán para ver si se presionaron esas teclas. Por ejemplo:
var altKeyPressed = instanceOfMouseEvent.altKey
Cuando se le solicite, devolverá verdadero o falso. Para obtener más información, vaya a https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey
Para referencia futura, también hay una llamada metaKey (NS / metaKey solamente) que funciona cuando se presiona la tecla meta.
Hay algunas razones por las que las teclas derecha e izquierda CTRL , SHIFT y ALT no se distinguen porque 1. keyCodes son las mismas 2. Muchos teclados portátiles pueden no tener dos teclas de control Tomada una Referencia: ¿Cómo puedo saber si un evento proviene de la tecla Ctrl derecha ?
Más fácil que nada: utiliza el evento de tecla para verificar si es Ctrl (17) o Mayús (16), luego usa el evento de tecla para verificar si es Intro (13) y Ctrl o Mayús presionar antes (al pulsar la tecla) cancelar Ctrl o Mayús en cualquier teclado pero Enter
Siguiendo mi comentario , esta es una posible solución.
Para verificar qué tecla de modificación específica se presiona, puede usar KeyboardEvent Location ( consulte la tabla de compatibilidad )
Para admitir IE8, afortunadamente podría utilizar la solución ya publicada .
Ahora la solución es establecer un objeto global con propiedades relevantes con respecto a qué teclas modificadoras se mantienen. Otras formas sin usar un objeto global serían posibles, por supuesto.
Aquí, capturo el evento usando el método de escucha de JavaScript relevante (jQuery no admite la fase de captura) . keydown/keyup evento para manejar el caso donde la propagación de los eventos keydown/keyup sería detenida por alguna razón por el código ya en uso.
/* 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>
Como notas al margen:
- La tecla ALT GR es una tecla de método abreviado para las teclas CTRL-Derecha y ALT
- al mantener simultáneamente dos teclas modificadoras (por ejemplo, las teclas Shift-Izquierda y Shift-Rigth), resultaría que solo se manejará la primera (parece el comportamiento predeterminado del navegador, así que de todos modos, ¡parece correcto!)
Use js-hotkeys . Es un plugin jQuery.
Esta es una prueba para mostrar lo que estás buscando. ¡También le muestra cómo capturar las teclas izquierda, derecha, arriba, abajo estándar y aquellas del teclado numérico (la que tiene números 2,4,6,8)! http://afro.systems.googlepages.com/test-static-08.html
e.originalEvent.location devuelve 1 para la tecla izquierda y 2 para la tecla derecha. Por lo tanto, puede detectar qué tecla modifier se presiona de la siguiente manera. Espero que esto te ayudará.
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>
$(''#someelement'').bind(''click'', function(event){
if(event.ctrlKey)
console.log(''ctrl'');
if(event.altKey)
console.log(''alt'');
if(event.shiftKey)
console.log(''shift'');
});
No sé si es posible verificar las teclas izquierda / derecha dentro de un clic, pero no creo que sea posible.