복붙노트

[JQUERY] jQuery를 단일 키 누르기 이벤트에 여러 개의 키를 감지

JQUERY

jQuery를 단일 키 누르기 이벤트에 여러 개의 키를 감지

해결법

  1. 1.당신은 D, E 및 V 키를 동시에 모두 아래로했다 감지하려는 경우, 당신은 모두를 keyDown과의 keyup을보고 아래있는 사람의지도를 유지해야합니다. 그들은 모두 아래가되면, 이벤트를 발생.

    당신은 D, E 및 V 키를 동시에 모두 아래로했다 감지하려는 경우, 당신은 모두를 keyDown과의 keyup을보고 아래있는 사람의지도를 유지해야합니다. 그들은 모두 아래가되면, 이벤트를 발생.

    예를 들면 : 라이브 사본 | 출처

    var map = {68: false, 69: false, 86: false};
$(document).keydown(function(e) {
    if (e.keyCode in map) {
        map[e.keyCode] = true;
        if (map[68] && map[69] && map[86]) {
            // FIRE EVENT
        }
    }
}).keyup(function(e) {
    if (e.keyCode in map) {
        map[e.keyCode] = false;
    }
});

    난 당신이 그들이 어떤 점에서 동시에 모두 아래로있는 한로 (즉 안정적으로 언론에 통증이있을 것 같은) 그들이에 눌려있는 주문하든 상관하지 않습니다 가정합니다.

  2. 2.베가의 유사 ...하지만 간단

    베가의 유사 ...하지만 간단

    var down = {};
$(document).keydown(function(e) {
    down[e.keyCode] = true;
}).keyup(function(e) {
    if (down[68] && down[69] && down[86]) {
        alert('oh hai');
    }
    down[e.keyCode] = false;
});​

  3. 3.아마도 간단한 키 조합은 쉬울 것?

    아마도 간단한 키 조합은 쉬울 것?

    어떻게 Shift + Alt + D 같은 어떻습니까? (대부분의 브라우저가 이미 하나 또는 다른 방법으로 Ctrl 키 + D를 해석하기 때문에 당신은 아마 Ctrl 키를 사용해서는 안)

    이에 대한 코드는 다음과 같이 될 것이다 :

    if(e.shiftKey && e.altKey && e.keyCode == 68)
{
  alert('l33t!');
}

  4. 4.나는 T.J.에서 답변을 jQuery를 피하기 위해 싶은 사람을 일반 자바 스크립트 크라우.

    나는 T.J.에서 답변을 jQuery를 피하기 위해 싶은 사람을 일반 자바 스크립트 크라우.

    //A W S D simultaneously
var map = {65: false, 87: false, 83: false, 68: false};
document.body.addEventListener('keydown', function (e) {
    var e = e || event; //to deal with old IE
    if (e.keyCode in map) {
        map[e.keyCode] = true;
        if (map[65] && map[87]) {
            console.log('up left');
        }else if (map[83] && map[68]) {
            console.log('down right');
        }else if (map[87] && map[68]) {
            console.log('up right');
        }else if (map[83] && map[65]) {
            console.log('down left');
        }
    }
});
document.body.addEventListener('keyup', function (e) {
    if (e.keyCode in map) {
        map[e.keyCode] = false;
    }
});

  5. 5.당신은 개별적으로 세 가지 주요 이벤트를 캡처 만 세 번째 후 조치를 해고해야합니다.

    당신은 개별적으로 세 가지 주요 이벤트를 캡처 만 세 번째 후 조치를 해고해야합니다.

    var keys = {
        d: { code: 100, pressed: false, next: 'e' },
        e: { code: 101, pressed: false, next: 'v' },
        v: { code: 118, pressed: false, next: 'd' }
    },
    nextKey = 'd';

$(document).keypress(function(e) {
    if (e.keyCode === keys[nextKey].code) {
        keys[nextKey].pressed = true;
        nextKey = keys[nextKey].next;
    } else {
        keys.d.pressed = false;
        keys.e.pressed = false;
        keys.v.pressed = false;
        nextKey = 'd';
    }

    if (keys.d.pressed && keys.e.pressed && keys.v.pressed) {
        alert('Entering dev mode...');
    }
});​

    물론이 작업을 수행하는 방법에는 여러 가지가 있습니다. D 전자 V :이 예는 순서대로 입력 다만, 아래로 동시에 키를 보유 할 필요가 없습니다.

    당신이 사용하는 경우, 당신은 약간의 시간 간격 후 누르면 플래그을 취소 증대 할 수 있습니다.

    다음은 작업 예입니다.

    면책 조항 : 나는 원래의 질문이 키가 "함께 누르면"해야한다고 말했다 알고 있습니다. 이것은 다른 답변자가 이미 키를 함께 누르면되고 충분한 솔루션을 제공하는 것처럼 단지 대안입니다.

  6. 6.나는 (이 게시물의 등) 3 개 답변을 시도하고, 그들 중 누구도 나를 위해 일하지 않는다. 그들은 키를 재설정하지 않았다.

    나는 (이 게시물의 등) 3 개 답변을 시도하고, 그들 중 누구도 나를 위해 일하지 않는다. 그들은 키를 재설정하지 않았다.

    이 3 키를 한 번 소성 후, 스크립트를 발사했다 경우 - 다시 해고 3 개 키 중 하나를 누르면.

    난 그냥이 스크립트를 쓴 그리고 그것은 매우 잘 작동합니다. 화재에 S + Shift 키를 사용하지만 당신은 쉽게 그것을 변경할 수 있습니다. 이 조합을 누른 후 다시 설정합니다.

    var saveArray = new Array();
saveArray[0] = false;
saveArray[1] = false;

$(document).ready(function(){

    $(document).keydown(function (f){
        if (f.keyCode == 16) {
            saveArray[0] = true;
        }
    });

    $(document).keyup(function (g){
        if(g.which == 16){
            saveArray[0] = false;
        }
    });

    $(document).keydown(function (h){
        if (h.keyCode == 83) {
            saveArray[1] = true;
            if(saveArray[0] == true && saveArray[1] == true){
                saveArray[0] = false;
                saveArray[1] = false;
                keypressSaveFunction();
            }
        }
    });

    $(document).keyup(function (i){
        if (i.which == 83) {
            saveArray[1] = false;
        }
    });
});

    function keypressSaveFunction(){
        alert("You pressed Shift+S");
    }

    바이올린 : http://jsfiddle.net/9m8yswwo/13/

  7. 7.A는 더 현대적인 솔루션을 비트, 화살표 기능을 활용하고 매개 변수를 휴식 :

    A는 더 현대적인 솔루션을 비트, 화살표 기능을 활용하고 매개 변수를 휴식 :

    CONST multipleKeypress = (함수 ($ 문서) { // 현재 다운 키의지도. CONST 키맵 = {} 를 keyDown과의 keyup 이벤트에 // 업데이트 키맵. (document.on $ "를 keyDown의 keyup" // 해당하는 열쇠가 다운되면, 할당 진실 // 키 맵의 때에 프로퍼티, 그렇지 않으면 할당 거짓. 이벤트 => 키맵 [event.keyCode = event.type === "를 keyDown" ) // 실제 기능. //는 첫 번째 인수로 청취자 이동합니다 인수 // 나머지는 키 코드입니다. 창 (수신기, ... 키) => () ($ document.keydown => { // 지정된 키의 모든 체크 다운합니다. 경우 (keys.every (키 => 키맵 [키])) 리스너 (이벤트) }) // 그것을 캐시 할 수있는 jQuery를 문서 객체를 전달합니다. } ($ (문서))) // 사용 예제 : multipleKeypress (() => CONSOLE.LOG ( "가압"), 68, 69, 86) // 자동으로 조각 결과를 초점 같이 window.blur () <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 가압 시도 D E 및 V 번. 에

  8. 8.당신은 더 후 "동시에"하나의 키를 처리하기를 keyDown과의 keyup 이벤트를 사용해야합니다.

    당신은 더 후 "동시에"하나의 키를 처리하기를 keyDown과의 keyup 이벤트를 사용해야합니다.

    input.on("keydown", function (e) {
                        if (e.which == 17) {
                            isCtrl = true; // Ctrl
                            return;
                        }

                        /* Ctrl and "c" */
                        if (isCtrl && e.which == 67) {
                            //some code 
                        }
                    }).keyup(function (e) {
                        if (e.which == 17) {
                            isCtrl = false; // no Ctrl
                        }
                    });

  9. 9.(당신의 JS 콘솔 봐) 예를 들어, 바이올린, http://jsfiddle.net/gAtTk/을 : 나는 잘 이해하는 경우

    (당신의 JS 콘솔 봐) 예를 들어, 바이올린, http://jsfiddle.net/gAtTk/을 : 나는 잘 이해하는 경우

    이 코드는 단어를 입력 할 것 "DEV"(이 예에서는 이벤트의 keyup 제거 끝)

    (function(seq) {
    var tmp = seq.slice();
    $(document).on("keyup.entersequence", function(e){
        if (!(e.keyCode === tmp.pop())) {
           tmp = seq.slice();
        }
        else {
           console.log(e.keyCode);  
            if (!tmp.length) {
               console.log('end');
               $(document).off("keyup.entersequence");
            }
        }
    });
}([68,69,86].reverse()));

  10. 10.오타를 방지하기 위해이 100ms 후 다중 키 프레스 + 타임 아웃 트리거 이벤트가이 코드를 사용합니다. 이 예에서 : A는, Z, E는이 100ms의 시간 내에 누를 경우, 이벤트가 트리거됩니다.

    오타를 방지하기 위해이 100ms 후 다중 키 프레스 + 타임 아웃 트리거 이벤트가이 코드를 사용합니다. 이 예에서 : A는, Z, E는이 100ms의 시간 내에 누를 경우, 이벤트가 트리거됩니다.

    var map = {65:false,90:false,69:false}; //Modify keyCodes here
$(document).keydown(function(e){
    console.log(e.keyCode);
    map[e.keyCode] = e.keyCode in map ? true : map[e.keyCode] || false;
    var result = Object.keys(map).filter(function(key){
        return map[key];
    }).length === Object.keys(map).length ? true : false;
    if(result){
        //Your event here
        Object.keys(map).forEach(function(key){
            map[key] = false;
        });
    }
    setTimeout(function(){
        map[e.keyCode] = false;
    },100);
});

  11. 11.당신은 순서에 대해 신경도 다른 키를 길게 누르세요해야하는 경우 : 다시 화재에 이벤트를 얻기 위해 첫 번째 키에 올려하지 않고 (예 : Shift + DEL, DEL, DEL을 ...) ... 나는 ParthThakkar의 대답 @에 lu1s '의견 @ 연장 BlakePlumm의 [바이올린] 코멘트 @ 수정했습니다.

    당신은 순서에 대해 신경도 다른 키를 길게 누르세요해야하는 경우 : 다시 화재에 이벤트를 얻기 위해 첫 번째 키에 올려하지 않고 (예 : Shift + DEL, DEL, DEL을 ...) ... 나는 ParthThakkar의 대답 @에 lu1s '의견 @ 연장 BlakePlumm의 [바이올린] 코멘트 @ 수정했습니다.

    또한, jQuery의 CSTE 연구진 ()를 사용하면 특정 요소에 키 시퀀스를 수신 할 수 있습니다. 'input.selector'또는 어떤 다른 사람으로 변경 '몸'.

    var map = [];
var down = [];
$(document).on('keydown','body', function(e) {
    if(!map[e.which]){
        down.push(e.which);
        if(down[0] === 68 && down[1] === 69 && down[2] === 86) {
            console.log('D + E + V');
        } else if(down[0] === 16 && down[1] === 46) {
            console.log('SHIFT + DEL');
        }
        /* more conditions here */
    }
    map[e.which] = true;
}).keyup(function(e) {
    map[e.which] = false;

    /* important for detecting repeat presses of
       last key while holding first key(s)
       (can be shortened. see fiddle) */
    var len = down.length;
    while (len--) {
        if(down[len] === e.which) down.splice(len,1); //removes only the keyup'd key
    }        
    $('.alert').html('');
});

    추가 생각 : 당신은 단지 좀 순서에 대해 관심이있는 경우 -이다, 최초의 키는 한 주 이벤트 발사 키를 마지막으로 누르고있는 (CTRL + Shift 키와 같은 물건을 + TAB, TAB, TAB),이 조건을 추가, 아래로해야 :

    else if(down.length>2) {
    if($.inArray(68,down)!=-1 && $.inArray(69,down)!=-1 && down[2] === 86) {
        $('.alert').html('A hacky D+E+V was pressed');
    }
}

    더 영광스러운 옵션과 라이브 데모와 함께 바이올린 - http://jsfiddle.net/kstarr/4ftL1p3k/

  12. 12.https://github.com/JesseBuesking/jquery.hotkeys.extended

    https://github.com/JesseBuesking/jquery.hotkeys.extended

    이것 좀 봐. 당신이 찾고 될 수 있습니다.

    우리는 여러 개의 키를 누릅니다에 함수를 트리거 할 수 있습니다. 예 : P + t + K

     $(document).hotkeys('p', 't', 'k', function (){
        //show blurbox
        $('#popup').blurbox({
            blur: 10, animateBlur: true, bgColor: 'rgba(255,255,0,0.2)'
        })bb.show();
    });

    어쩌면 당신이 찾고.

    13. from https://stackoverflow.com/questions/10655202/detect-multiple-keys-on-single-keypress-event-in-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 정렬 혼합 알파 / 숫자 배열  (0) 2020.10.21
[JQUERY] jQuery로 HTML 주석을 선택  (0) 2020.10.21
[JQUERY] JS 간단한 스로틀  (0) 2020.10.21
[JQUERY] 메뉴에서 .active는 jQuery를 추가 기능 클래스  (0) 2020.10.21
[JQUERY] jQuery를 라디오에 따라 사용 안 함 옵션을 선택합니다 (모든 브라우저에 대한 필요 지원) 선택  (0) 2020.10.21
,

티스토리툴바