다음 코드에서 어떤 Ctrl / Shift/ Alt키가 눌 렸는지 어떻게 확인할 수 있습니까?

$("#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"); }
});

이것은 IE 8에서만 작동하는 모든 브라우저에서 작동하지 않을 것입니다. Microsoft는 어떤 (오른쪽 / 왼쪽) 키를 눌렀는지 확인하는 기능을 구현했습니다. 여기에 링크가 있습니다 http://msdn.microsoft.com/en-us/library/ms534630(VS.85).aspx

또한 브라우저의 keypress, keyup, keydown 이벤트에 대한이 기사를 찾았습니다. 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');
      }
    }
  }); 

$('#someelement').bind('click', function(event){
   if(event.ctrlKey)
      console.log('ctrl');
   if(event.altKey)
      console.log('alt');
   if(event.shiftKey)
      console.log('shift');

});

클릭 이벤트 내에서 왼쪽 / 오른쪽 키를 확인할 수 있는지는 모르겠지만 가능하다고 생각하지 않습니다.

e.originalEvent.location왼쪽 키에 대해 1을, 오른쪽 키에 대해 2를 반환합니다. 따라서 modifier다음과 같이 어떤 키가 눌 렸는지 감지 할 수 있습니다 . 이것이 당신을 도울 것입니다.

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>

대부분의 경우에서 ALT, CTRL그리고 SHIFT키 부울 그 키를 누르면 알아보기 위해 작동합니다. 예를 들면 :

var altKeyPressed = instanceOfMouseEvent.altKey

호출되면 true 또는 false를 반환합니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey 참조하십시오.

향후 참조를 metaKey위해 메타 키를 눌렀을 때 작동하는 (NS / firefox 전용) 이라는 이름도 있습니다 .

다음 내 댓글 이 가능한 솔루션입니다.

어떤 특정 수정 자 키를 눌렀는지 확인하려면 KeyboardEvent Location을 사용할 수 있습니다 ( 테이블 지원 참조 ).

IE8을 지원하려면 이미 게시 된 솔루션을 사용할 수 있습니다 .

이제 해결 방법은 수정 자 키가 유지되는 관련 속성을 사용하여 전역 개체를 설정하는 것입니다. 물론 전역 객체를 사용하지 않는 다른 방법도 가능합니다.

여기에서 관련 자바 스크립트 리스너 메소드를 사용하여 이벤트를 캡처합니다 (jQuery는 캡처 단계를 지원하지 않음) . keydown/keyup이미 사용중인 코드로 인해 어떤 이유로 이벤트 전파가 중지 되는 경우를 처리하기 위해 이벤트를 캡처 합니다.

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

참고로 :

• ALT GRkey는 CTRL-Right&에 대한 바로 가기 키입니다 .ALT 키
• 두 개의 indentical modifier 키 (예 : Shift-Left 및 Shift-Rigth 키)를 동시에 누르면 처음 하나만 처리됩니다 (기본 브라우저 동작처럼 보이므로 어쨌든 옳은 것 같습니다!)

2020 년에 적합한 답변을 추가하겠다고 생각했습니다.

이제 MouseEvent.getModifierState()이것을 사용할 수도 있습니다 . 작성 당시 대부분의 브라우저 에서 지원됩니다 .

document.addEventListener("click", (evn) => {
  const shift = evn.getModifierState("Shift");
  const ctrl = evn.getModifierState("Control");
  const alt = evn.getModifierState("Alt");

  console.log("Mouse pressed! Modifiers:");
  console.table({shift, ctrl, alt});
});

주의 사항 :

• 특히이 API 는 왼쪽 및 오른쪽 수정자를 . 당신이 그것에 관심이 있다면, 당신은 운이 좋지 않습니다. 그러나 나는 이것이 소수의 사용 사례에서만 중요하다고 생각합니다.
• 이 API의 주요 장점 중 하나는 이외의 수정을 지원한다는 것입니다 shift, ctrl하고 alt. 그러나 특정 동작은 고유 한 플랫폼 차이로 인해 여러 OS에서 다소 불규칙합니다. 사용하기 전에 여기 를 확인 하십시오 .

사용 JS-단축키 . jQuery 플러그인입니다.

이것은 당신이 찾고있는 것을 보여주는 테스트입니다. 또한 표준 왼쪽, 오른쪽, 위쪽, 아래쪽 키와 숫자 키패드 (숫자 2,4,6,8)에서 캡처하는 방법도 보여줍니다! http://afro.systems.googlepages.com/test-static-08.html

무엇보다 쉽습니다 : keydown 이벤트를 사용하여 Ctrl(17) 또는 Shift(16)인지 확인한 다음 keyup 이벤트를 사용하여 Enter(13) 인지 확인 하고 Ctrl또는 Shift(키를 누를 때) 취소 Ctrl또는 키 업 전에 누르지 Shift만Enter

매력처럼 작동합니다! Chrome, Firefox, IE 및 Edge에서도;) 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))
});

다음은 클릭 이벤트가있는 버전 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=[];   
});

오른쪽과 왼쪽 CTRL, SHIFT& ALT키를 구별 할 수없는 이유가 몇 가지 있습니다 . 1. 키 코드가 같기 때문입니다. 2. 많은 랩톱 키보드에는 두 개의 제어 키가 없을 수 있습니다 . 참조 참조 : 이벤트가 오른쪽 Ctrl 키에서 오는지 어떻게 알 수 있습니까?