programing

JQuery 또는 JavaScript:앵커 태그 하이퍼링크를 클릭하는 동안 시프트 키를 눌렀는지 여부를 어떻게 확인합니까?

lastcode 2023. 8. 15. 11:08
반응형

JQuery 또는 JavaScript:앵커 태그 하이퍼링크를 클릭하는 동안 시프트 키를 눌렀는지 여부를 어떻게 확인합니까?

자바스크립트 함수를 호출하는 앵커 태그가 있습니다.

JQuery 유무에 관계없이 링크를 클릭하는 동안 시프트 키가 다운되었는지 여부를 확인하려면 어떻게 해야 합니까?

키 누름은 시프트 키가 아닌 "실제 키"를 누를 때만 실행되므로 다음 코드가 작동하지 않습니다.(시프트키만 눌러도 불이 날 줄 알았어요.)

var shifted = false;

$(function() {                           
    $(document).keypress(function(e) {
        shifted = e.shiftKey;
        alert('shiftkey='+e.shiftkey);
    });

    $(document).keyup(function(e) {
        shifted = false;
    });
}

...

function myfunction() {
  //shift is always false b/c keypress not fired above
}
    $(document).on('keyup keydown', function(e){shifted = e.shiftKey} );

자바스크립트의 각 키 스트로크에 대한 키 코드는 다음과 같습니다.사용자가 Shift 키를 눌렀는지 감지할 수 있습니다.

backspace           8
tab                 9
enter               13
shift               16
ctrl                17
alt                 18
pause/break         19
caps lock           20
escape              27
page up             33
page down           34
end                 35
home                36
left arrow          37
up arrow            38
right arrow         39
down arrow          40
insert              45
delete              46
0                   48
1                   49
2                   50
3                   51
4                   52
5                   53
6                   54
7                   55
8                   56
9                   57
a                   65
b                   66
c                   67
d                   68
e                   69
f                   70
g                   71
h                   72
i                   73
j                   74
k                   75
l                   76
m                   77
n                   78
o                   79
p                   80
q                   81
r                   82
s                   83
t                   84
u                   85
v                   86
w                   87
x                   88
y                   89
z                   90
left window key     91
right window key    92
select key          93
numpad 0            96
numpad 1            97
numpad 2            98
numpad 3            99
numpad 4            100
numpad 5            101
numpad 6            102
numpad 7            103
numpad 8            104
numpad 9            105
multiply            106
add                 107
subtract            109
decimal point       110
divide              111
f1                  112
f2                  113
f3                  114
f4                  115
f5                  116
f6                  117
f7                  118
f8                  119
f9                  120
f10                 121
f11                 122
f12                 123
num lock            144
scroll lock         145
semi-colon          186
equal sign          187
comma               188
dash                189
period              190
forward slash       191
grave accent        192
open bracket        219
back slash          220
close braket        221
single quote        222

모든 브라우저가 키 누르기 이벤트를 잘 처리하는 것은 아니므로 다음과 같이 키 위로 또는 키 아래로 이벤트를 사용합니다.

$(document).keydown(function (e) {
    if (e.keyCode == 16) {
        alert(e.which + " or Shift was pressed");
    }
});

마우스 이벤트의 경우 Firefox에서 이벤트 개체의 "shiftKey" 속성을 통해 시프트 키가 다운되었는지 여부를 알 수 있습니다.MSDN에 문서화되어 있지만 저는 그것을 영원히 시도하지 않았기 때문에 IE가 이것을 제대로 하는지 기억하지 못합니다.

따라서 "클릭" 핸들러의 이벤트 개체에서 "shiftKey"를 확인할 수 있어야 합니다.

비슷한 문제가 있었습니다. 'shift+click'을 캡처하려고 했지만 표준이 아닌 콜백이 있는 타사 컨트롤을 사용했기 때문입니다.click처리기, 이벤트 개체 및 관련된 개체에 액세스할 수 없습니다.e.shiftKey.

저는 결국 마우스 다운 이벤트를 처리하여 시프트니스를 기록하고 나중에 콜백할 때 사용하게 되었습니다.

    var shiftHeld = false;
    $('#control').on('mousedown', function (e) { shiftHeld = e.shiftKey });

다른 사람이 이 문제에 대한 해결책을 찾다가 여기에 올 경우를 대비하여 게시되었습니다.

마우스로 클릭하는 동안 Shift 키를 눌렀는지 확인하려면 클릭 이벤트 개체에 shiftKey(및 ctrl 및 alt 및 meta 키)의 정확한 속성이 있습니다. https://www.w3schools.com/jsref/event_shiftkey.asp

jQuery 사용하기:

$('#anchor').on('click', function (e) {
    if (e.shiftKey) {
        // your code
    }
});

keypress이벤트는 또는 를 클릭할 때 모든 브라우저에 의해 트리거되지 않지만 다행히 이벤트는 트리거됩니다.

스위치를 끄면keypress와 함께keydown운이 더 좋을 수도 있습니다.

현재 누른 키 코드를 배열에 저장하여 특정 키를 눌렀는지 테스트하는 방법을 사용했습니다.

var keysPressed = [],
    shiftCode = 16;

$(document).on("keyup keydown", function(e) {
    switch(e.type) {
        case "keydown" :
            keysPressed.push(e.keyCode);
            break;
        case "keyup" :
            var idx = keysPressed.indexOf(e.keyCode);
            if (idx >= 0)
                keysPressed.splice(idx, 1);
            break;
    }
});

$("a.shifty").on("click", function(e) {
    e.preventDefault();
    console.log("Shift Pressed: " + (isKeyPressed(shiftCode) ? "true" : "false"));
});

function isKeyPressed(code) {
    return keysPressed.indexOf(code) >= 0;
}

여기에 jsfidle이 있습니다.

우수한 JavaScript 라이브러리 키보드JS는 SHIFT 키를 포함한 모든 유형의 키 누름을 처리합니다.먼저 Ctrl+x를 누른 다음 a를 누르는 것과 같은 키 조합을 지정할 수도 있습니다.

KeyboardJS.on('shift', function() { ...handleDown... }, function() { ...handleUp... });

간단한 버전을 원하는 경우 @tonycoupland)의 답변으로 이동합니다.

var shiftHeld = false;
$('#control').on('mousedown', function (e) { shiftHeld = e.shiftKey });

이것은 저에게 매우 유용합니다.

function listenForShiftKey(e){
    var evt = e || window.event;
    if (evt.shiftKey) {
      shiftKeyDown = true;
    } else {
      shiftKeyDown = false;
    }
}

보다 모듈화된 접근 방식과 고객의 비즈니스 요구사항을 충족할 수 있는 기능this수신기의 범위:

var checkShift = function(fn, self) {
  return function(event) {
    if (event.shiftKey) {
      fn.call(self, event);
    }
    return true;
  };
};

$(document).on('keydown', checkShift(this.enterMode, this));

지정된 키를 탐지하려는 사람이 있고 "수정자"(자바에서 호출됨)의 상태를 알아야 하는 경우, 즉,Shift, Alt 및 Control 키를 사용하면 다음과 같은 작업을 수행할 수 있습니다.keydownShift, Alt 또는 Control 키를 현재 아무 것도 누르지 않은 경우에만 사용할 수 있습니다.

jqMyDiv.on( 'keydown', function( e ){
    if( ! e.shiftKey && ! e.altKey && ! e.ctrlKey ){
        console.log( e );
        if( e.originalEvent.code === 'F9' ){
          // do something 
        }
    }
});
var shiftDown = false;
this.onkeydown = function(evt){
    var evt2 = evt || window.event;
    var keyCode = evt2.keyCode || evt2.which;       
    if(keyCode==16)shiftDown = true;
}
this.onkeyup = function(){
    shiftDown = false;
}

데모

언급URL : https://stackoverflow.com/questions/3781142/jquery-or-javascript-how-determine-if-shift-key-being-pressed-while-clicking-an

반응형