Проверьте клавиши Ctrl / Shift / Alt на событие «щелчок»

Как определить, какие клавиши 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"); }
});

person Misha Moroshko    schedule 17.05.2010    source источник
comment
@JeremyBanks Вы ищете Расположение KeyboardEvent (см. поддержку таблиц). В jQuery, используя оболочку событий jq, вам нужно использовать event.originalEvent.location. Тогда логика для реализации при нажатии не так уж сложна, я думаю, просто установите некоторый флаг/объект для событий keydown/keyup и проверьте его при нажатии. Проблема может заключаться в обработке ключа altGr, который может дать противоречивый результат. Если будет время, отвечу позже...   -  person A. Wolff    schedule 06.12.2015


Ответы (10)


Ну, это не будет работать во всех браузерах, только в IE 8. Microsoft реализовала возможность определять, какая клавиша (правая/левая) была нажата. Вот ссылка http://msdn.microsoft.com/en-us/library/ms534630(VS.85).aspx

Я также нашел эту удивительную статью о нажатии клавиш, нажатии клавиши, событии нажатия клавиши в браузерах. 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');
      }
    }
  }); 
person John Hartsock    schedule 20.05.2010
comment
Извините, я не упомянул, что меня интересует Firefox 3.6.3. Я обновил вопрос соответственно. - person Misha Moroshko; 21.05.2010
comment
Миша Морошко. Извините, но в Firefox пока нет возможности сделать это. Возможно, в будущем он будет реализовывать keyLocation, keyIdentifier или shiftLeft... У меня есть дикое предложение, но я не уверен, что оно сработает. Я знаю, что апплеты JAVA могут обнаруживать правые и левые нажатия клавиш. если бы вы могли зафиксировать нажатие клавиши в апплете, а затем передать информацию о правом / левом обратно на веб-сайт. Я даже не могу начать рассказывать вам, как это сделать. но это идея. Flash может быть альтернативой JAVA-аплету - person John Hartsock; 21.05.2010
comment
Да, я думал, что ты не будешь. Но сейчас это просто невозможно сделать с помощью JQuery/HTML DOM и Firefox 3.6.3. - person John Hartsock; 21.05.2010
comment
Точно так же вы можете сделать это с помощью Flash Actionscript3. также, но я предполагаю, что вы тоже не хотите туда идти. - person mVChr; 26.05.2010
comment
Ссылка на quirksmode в одном из других комментариев предполагает, что это IE6+, а не просто IE8... - person Stobor; 27.05.2010
comment
хороший пон стобор но так как ищет решение в Firefox 3.6.3. Это немного неактуально - person John Hartsock; 27.05.2010

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

});

Я не знаю, можно ли проверить левые/правые клавиши в событии клика, но я не думаю, что это возможно.

person jAndy    schedule 17.05.2010
comment
Shift влево и вправо имеют код клавиши 16. То же самое с Ctrl (17) и alt (18) - person ; 20.05.2010
comment
Я думаю, вам придется дождаться поддержки DOM3, чтобы можно было отличить слева направо. DOM 3 представляет event.keyLocation (w3. org/TR/DOM-Level-3-Events/). - person DaveS; 21.05.2010
comment
Возможно ли, что Firefox 3.6.3 имеет некоторую реализацию этого? - person Misha Moroshko; 21.05.2010
comment
Кажется, что эти левые/правые функции еще не реализованы в Firefox. Для смены есть запрос функции, который вы можете отметить: bugzilla.mozilla.org/show_bug.cgi ?id=458433 ctrlLeft даже не содержит запросов об ошибках/функциях. Страница Quirksmode (хотя информация о последних браузерах отсутствует): quirksmode.org/dom/w3c_events. html#keyprops - person Simon B.; 26.05.2010

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>

person Ibrahim Khan    schedule 08.12.2015
comment
Я быстро посмотрел в Chrome и пришел к тому же результату, что и вы. Используйте event.location или event.keyLocation и, возможно, откат к синтаксису event.ctrlLeft для IE OLDTIMER. - person Tokimon; 08.12.2015
comment
Использование event.location — единственное, что сработало для меня в Chrome, чтобы отличать левые клавиши от правых. - person Mac; 13.10.2016
comment
e.originalEvent.location работает у меня как в Chrome, так и в Firefox. @Мак - person Ibrahim Khan; 13.10.2016
comment
Кажется странным использовать keyup... Если вы хотите знать, была ли нажата (удержана) Ctrl во время click, вам следует использовать keydown и установить флаг, который затем можно проверить в прослушивателе кликов. Сбросьте флаг в keyup. - person Stijn de Witt; 28.01.2018

В большинстве случаев логические значения клавиш ALT, CTRL и SHIFT позволяют определить, были ли нажаты эти клавиши. Например:

var altKeyPressed = instanceOfMouseEvent.altKey

При вызове он возвращает true или false. Для получения дополнительной информации перейдите по адресу https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey

Для справки в будущем, есть также один, называемый metaKey (только NS/firefox), который работает при нажатии мета-клавиши.

person DJHakim    schedule 10.12.2015
comment
Это, вероятно, лучший ответ здесь. Интересно, что голосов нет. - person MarkSkayff; 20.03.2017
comment
Стоит отметить, что это простое решение может не сработать, если пользователь использует Linux Mint 18 с настройками по умолчанию. Если для параметра ОС в разделе «Предпочтения»: Windows: Поведение: Специальная клавиша для перемещения и изменения размера окон установлено значение Alt (как это установлено по умолчанию), удерживание Alt приведет к тому, что событие click не будет запущено, и, следовательно, функция, ссылающаяся на altKey свойство никогда не будет выполнено. - person Patrick Dark; 23.04.2018

Следуя моему комментарию, это возможное решение .

Чтобы проверить, какая конкретная клавиша-модификатор нажата, вы можете использовать KeyboardEvent Location. (см. поддержку таблиц)

К счастью, для поддержки IE8 вы можете использовать уже опубликованное решение.

Теперь обходной путь состоит в том, чтобы установить глобальный объект с соответствующими свойствами в отношении удерживаемых клавиш-модификаторов. Конечно, возможны и другие способы без использования глобального объекта.

Здесь я фиксирую событие, используя соответствующий метод слушателя javascript (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 GR является сочетанием клавиш CTRL-Right и ALT
  • одновременное удерживание двух одинаковых клавиш-модификаторов (например, клавиш Shift-Left и Shift-Rigth) приведет к обработке только первой (похоже на поведение браузера по умолчанию, так что в любом случае кажется правильным!)
person A. Wolff    schedule 06.12.2015

Просто подумал, что добавлю ответ, подходящий для 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});
});

Пример

Предостережения:

person cyqsimon    schedule 27.05.2020
comment
Большое спасибо. Это намного чище! - person Austin Burk; 14.08.2020

Используйте горячие клавиши js. Это плагин jQuery.

Это тест, чтобы показать, что вы ищете. Он также покажет вам, как захватывать стандартные клавиши влево, вправо, вверх, вниз и с цифровой клавиатуры (с цифрами 2,4,6,8)! http://afr.systems.googlepages.com/test-static-08.html

person user347594    schedule 26.05.2010

Проще всего: вы используете событие keydown, чтобы проверить, является ли это Ctrl (17) или Shift (16), затем вы используете событие keyup, чтобы проверить, является ли это Enter< /kbd> (13) и Ctrl или Shift нажаты до (при нажатии клавиши) отмены Ctrl или Shift при любую клавишу, кроме Enter

person Otvazhnii    schedule 11.09.2014

Работает как шарм! а также в 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=[];   
});
person Vixed    schedule 11.12.2015

По некоторым причинам правая и левая клавиши CTRL,SHIFT и ALT неразличимы, потому что 1. Коды клавиш одинаковые 2. Клавиатуры многих ноутбуков могут нет двух клавиш управления. Взята ссылка: Как я могу узнать, происходит ли событие от правой клавиши Ctrl?

person Parth Patel    schedule 07.12.2015