¿Cómo podría identificar que Ctrl /Cambio /Alt teclas se pulsen 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"); }
});
  • Estás buscando KeyboardEvent Ubicación (ver tabla de soporte). En jQuery, utilizando jq contenedor de eventos, es necesario utilizar event.originalEvent.location. Entonces la lógica para implementar en haga clic en no es tan difícil, supongo, que acaba de establecer algunos bandera/objeto en keydown/evento keyup y comprobar en haga clic en. Podría ser manejar altGr clave que puede dar resultados incoherentes. Si tengo tiempo, voy a hacer una respuesta, más tarde…

9 Comentarios

  1. 67

    Bien que esto no funciona en todos los navegadores solo IE 8. Microsoft implementó la capacidad para determinar qué (derecha/izquierda) tecla que se ha presionado. Aquí hay un enlace http://msdn.microsoft.com/en-us/library/ms534630(VS.85).aspx

    También he encontrado esta maravilla de artículo sobre keypress, keyup evento keydown 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');
          }
        }
      }); 
    • Lo siento, no he mencionado que estoy interesado en Firefox 3.6.3. He actualizado la pregunta en consecuencia.
    • Misha Moroshko. Lo sentimos, pero no hay manera de hacer esto en firefox todavía. Tal vez va a implementar «keyLocation», «keyIdentifier», o «shiftLeft» en el futuro….Tengo un salvaje sugerencia pero no se si se va a trabajar. Sé que los applets de JAVA tiene la capacidad de detectar a la derecha y a la izquierda de pulsaciones de teclas. si usted podría capturar las pulsaciones del teclado en el applet y, a continuación, pasar a la derecha/izquierda de la información a la página web. No puedo ni siquiera comenzar a decirle cómo hacerlo. pero su idea. Flash puede ser una alternativa a un applet de JAVA
    • Sí, pensé que te molestaría. Pero ahora no sólo de su posible hacer utilizando JQuery/HTML DOM y Firefox 3.6.3
    • Del mismo modo, se podría hacer con un poco de Flash Actionscript3 así, pero supongo que usted no quiere ir allí.
    • El quirksmode enlace en uno de los comentarios que sugiere que es IE6+, en lugar de sólo IE8…
    • De hecho, su propio enlace de MSDN establece que es IE5.5+…
    • bueno pont stobor, pero ya que él está buscando una solución en Firefox 3.6.3. Que es un poco irrelevent

  2. 38
    $('#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 comprobar las teclas izquierda/derecha dentro de un evento click, pero no creo que sea posible.

    • Debe haber alguna forma…
    • Desplazamiento a la izquierda y a la derecha, ambos tienen un código de clave de 16. Mismo con la tecla Ctrl (17) y alt (18)
    • Creo que tendrás que esperar para DOM3 apoyo para ser capaz de distinguir entre izquierda y derecha. DOM 3 introduce evento.keyLocation (w3.org/TR/DOM-Level-3-Events/…).
    • Es posible que Firefox 3.6.3 tiene algunos implementación de este ?
    • Parece que los de izquierda/derecha características no se han implementado en Firefox. Para el cambio de sa solicitud de característica podría estrella: bugzilla.mozilla.org/show_bug.cgi?id=458433 ctrlLeft incluso no tiene un bug/función de solicitud. Quirksmode página (aunque carece de información sobre cualquier recientes de los navegadores): quirksmode.org/dom/w3c_events.html#keyprops
  3. 6

    e.originalEvent.location devuelve 1 para la tecla de la izquierda y 2 a la derecha de la clave. Por lo tanto, se puede detectar el modifier se presiona la tecla siguiente. Espero que esto le ayudará.

    JS:

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

    HTML:

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

    • Hice una rápida mirada en Chrome y me vino con el mismo resultado como usted. Uso event.location o event.keyLocation y, posiblemente, un retroceso a la event.ctrlLeft sintaxis para IE OLDTIMER.
    • El uso de eventos.ubicación es la única cosa que trabajó para mí en Chrome, para distinguir la izquierda teclas de teclas en el lateral derecho.
    • e.originalEvent.location trabajando para mí en Chrome como en Firefox. @Mac
    • Parece extraño usar keyup… Si quieres saber si Ctrl fue presionado (sujetado) durante un click, usted desea utilizar keydown y establecer un indicador que se puede comprobar a continuación, haga clic en el oyente. Restablecer el indicador en keyup.
  4. 5

    En la mayoría de los casos, el ALT, CTRL,y CAMBIO clave booleanos va a trabajar para ver si las teclas se presionan. Por ejemplo:

    var altKeyPressed = instanceOfMouseEvent.altKey

    Se devolverá true o false. Para obtener más información, vaya a https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey

    Para referencia en el futuro, también hay uno llamado metaKey (NS/firefox) que funciona cuando la meta se pulsa la tecla.

    • Esta es probablemente la mejor respuesta aquí. Curiosamente no tiene upvotes.
    • Vale la pena señalar que esta solución simple puede fallar si el usuario está utilizando Linux Mint 18 con la configuración predeterminada. Si OS configuración que se encuentra en Preferencias: Windows: Comportamiento: Clave Especial para mover y cambiar el tamaño de windows está configurado para la tecla Alt (como está por defecto), la celebración de Alt hará que el click caso de no ser despedido y, por lo tanto, la función hace referencia a la altKey propiedad no se ejecuta nunca.
  5. 2

    Siguientes mi comentario, esto es posible solución.

    Para comprobar que se concreta modificador de la tecla es presionada, puede utilizar KeyboardEvent Ubicación (consulte la tabla de compatibilidad)

    Para apoyar a IE8, afortunadamente, usted podría utilizar ya han publicado la solución.

    Ahora la solución es establecer un objeto global con propiedades relevantes respecto de los cuales las teclas modificadoras se llevan a cabo. Otras maneras sin usar objeto global sería posible, por supuesto.

    Aquí, yo evento de captura usando javascript escucha método (jQuery no admite la captura de fase). Nos evento de captura para manejar el caso en que keydown/keyup eventos de propagación se detuvo por alguna razón por la que ya se en-utilice el código.

    JS:

    /* 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();
    });
    })

    CSS:

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

    HTML:

    <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:

    • ALT GR teclado es una tecla de acceso directo para CTRL-a la Derecha & ALT
      teclas de
    • sostener simultáneamente dos idéntico teclas modificadoras (e.g Mayús Izquierda &
      Shift-Rigth teclas), resultaría en primer lugar se maneja
      (parece como navegador predeterminado comportamiento, así que de todos modos, parece que a la derecha!)
  6. 0

    Más fácil que cualquier otra cosa: utilizar evento keydown para comprobar si es Ctrl (17) o Cambio (16), a continuación, utilizar el evento keyup para comprobar si es Entrar (13) Ctrl o Cambio hit antes (en la tecla)
    cancelar Ctrl o Cambio en cualquier keyup pero Entrar

  7. 0

    Funciona como un encanto! y en Chrome, Firefox, IE, y el Borde demasiado 😉 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))
    });

    Siguiente, 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=[];   
    });

Dejar respuesta

Please enter your comment!
Please enter your name here