web-dev-qa-db-ja.com

「クリック」イベントでCtrl / Shift / Altキーを確認します

どうすれば識別できますかwhich 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"); }
});
javascriptjqueryhtmlfirefox3.6
73
Misha Moroshko

さて、これはすべてのブラウザで機能しません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');
      }
    }
  });
67
John Hartsock
$('#someelement').bind('click', function(event){
   if(event.ctrlKey)
      console.log('ctrl');
   if(event.altKey)
      console.log('alt');
   if(event.shiftKey)
      console.log('shift');

});

クリックイベント内で左右のキーをチェックできるかどうかはわかりませんが、可能だとは思いません。

38
jAndy

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>
6
Ibrahim Khan

ほとんどの場合 ALT、 CTRL、そして SHIFT キーブール値は、それらのキーが押されたかどうかを確認するために機能します。例えば：

var altKeyPressed = instanceOfMouseEvent.altKey

呼び出されると、trueまたはfalseを返します。詳細については、 https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey にアクセスしてください。

将来の参照のために、メタキーが押されたときに機能するmetaKey（NS/firefoxのみ）と呼ばれるものもあります。

5
DJHakim

私のコメント に続いて、これは可能な解決策です。

どの特定の修飾キーが押されているかを確認するには、 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 キー
  • 2つの同一の修飾キー（Shift-LeftおよびShift-Rigthキーなど）を同時に保持すると、最初の1つだけが処理されます（デフォルトのブラウザーの動作のように見えるため、とにかく正しいようです！）
2
A. Wolff

js-hotkeys を使用します。これはjQueryプラグインです。

これは、探しているものを示すテストです。また、標準の左、右、上、下のキーと数字キーパッド（数字が2,4,6,8のキー）のキーをキャプチャする方法も示します。 http://afro.systems.googlepages.com/test-static-08.html

1
user347594

チャームのように機能します！また、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=[];   
});
0
Vixed

何よりも簡単：keydownイベントを使用して、それが Ctrl （17）または Shift （16）、keyupイベントを使用して、それが Enter （13）および Ctrl または Shift （キーを押して）キャンセルする前にヒット Ctrl または Shift どんなキーアップでも Enter

0
Otvazhnii

左右にはいくつかの理由があります CTRL、SHIFT ＆ ALT 1. keyCodesが同じであるため、キーは区別できません2.多くのラップトップキーボードには、2つのコントロールキーがない場合があります参照： イベントが右Ctrlキーから来ているかどうかを確認するにはどうすればよいですか？

0
Parth Patel