Перевірте клавіші Ctrl / Shift / Alt під час натискання

Question 1

Як я можу визначити, які 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"); }
});

Question 2

Ну, ви не працюєте у всіх браузерах лише в 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');
      }
    }
  });

Question 3

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

});

Я не знаю, чи можливо перевірити наявність лівої / правої клавіші в межах події клацання, але я не думаю, що це можливо.

Question 4

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>

Розгорніть фрагмент

Question 5

У більшості випадків ALT, CTRLі SHIFTключової булеві буде працювати , щоб побачити , якщо були натиснуті ці клавіші. Наприклад:

var altKeyPressed = instanceOfMouseEvent.altKey

Коли його покличуть, він поверне істину чи помилку. Для отримання додаткової інформації перейдіть за посиланням https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey

Для подальшого довідкового запиту є також один із них metaKey(лише NS / firefox), який працює при натисканні мета-клавіші.

Question 6

Слідом за моїм коментарем це можливе рішення.

Щоб перевірити, яку конкретну клавішу модифікатора натиснуто, ви можете використовувати 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 GRkey - це ярлик для CTRL-Right&ALT клавіш
утримання одночасно двох невід'ємних клавіш-модифікаторів (наприклад, клавіш Shift-Left та Shift-Rigth), призведе до того, що буде оброблено лише першу (здається поведінкою браузера за замовчуванням, тому в будь-якому випадку, здається правильно!)

Question 7

Просто подумав, що додам відповідь, відповідну до 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. Однак специфічна поведінка є дещо хибною в різних ОС через вроджені відмінності в платформі. Перевірте тут, перш ніж використовувати їх.

Question 8

Використовуйте js-гарячі клавіші . Це плагін jQuery.

Це тест, щоб показати, що ви шукаєте. Він також показує, як знімати стандартну та ліву, праву, вгору, вниз клавіші та клавіші з цифрової клавіатури (тієї, що має цифри 2,4,6,8)! http://afro.systems.googlepages.com/test-static-08.html

Question 9

Простіше за все: ви використовуєте подію клавіатури, щоб перевірити, чи це Ctrl(17) або Shift(16), а потім використовуєте подію клавіатури, щоб перевірити, чи це Enter(13), Ctrlабо Shiftнатискаєте до (при натисканні клавіші) скасування Ctrlабо Shiftна будь-якій клавіатурі, алеEnter

Question 10

Працює як оберіг! і на 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=[];   
});

Question 11

Є кілька причин , по яким праві і ліві CTRL, SHIFTі ALTключі не помітні , так як 1. Кодові ключі однакові 2. Багато клавіатури ноутбука не може мати дві клавіші управління Взяті Посилання: Як я можу сказати , якщо подія відбувається від правої клавіші Ctrl?