javascript keypress - Обнаружение нескольких ключей в одном событии нажатия клавиши в jQuery



enter keydown (11)

Можно ли вообще комбинировать смесь нажатия клавиш для запуска одного события?

$(document).keyup(function(e){
    if (e.keyCode == 68 && e.keyCode == 69 && e.keyCode == 86) {
        alert('oh hai');
    }
});

Я пробовал его в Chrome, но это событие не срабатывает.

Назовите меня сумасшедшим, но я пишу расширение Chrome и хочу нажимать клавиши D + E + V, чтобы заставить его работать в скрытом режиме разработчика.


Answers

Немного более современное решение, использует функции стрелок и параметры отдыха :

const multipleKeypress = (function($document) {
  // Map of keys which are currently down.
  const keymap = {}
  // Update keymap on keydown and keyup events.
  $document.on(
    "keydown keyup"
    // If the key is down, assign true to the corresponding
    // propery of keymap, otherwise assign false.
   ,event => keymap[event.keyCode] = event.type === "keydown"
  )
  // The actual function.
  // Takes listener as the first argument,
  // rest of the arguments are key codes.
  return (listener, ...keys) =>
    $document.keydown(() => {
      // Check if every of the specified keys is down.
      if (keys.every(key => keymap[key]))
        listener(event)
    })
// Pass a jQuery document object to cache it.
}($(document)))

// Example usage:
multipleKeypress(() => console.log("pressed"), 68, 69, 86)

// Automatically focus the snippet result
window.focus()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Try pressing <kbd>d</kbd>, <kbd>e</kbd> and <kbd>v</kbd> at once.</p>


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();
    });

возможно, вы ищете это.


Подобно Vega's ... но проще

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;
});​

Используйте этот код для создания события, вызванного несколькими нажатиями клавиш + Тайм-аут после 100 мс для предотвращения ошибок. В этом примере: если A, Z, E нажаты в течение периода времени 100 мс, событие будет запущено.

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);
});

Если вы хотите обнаружить, что все ключи d , e и v были одновременно опущены, вам нужно посмотреть как keydown и keyup и сохранить карту тех, которые не работают. Когда они все упадут, запустите свое мероприятие.

Например: Живая копия | source

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;
    }
});

Я предполагаю, что вам все равно, в каком порядке они прижаты (так как это было бы болью, чтобы надежно нажать), пока они все в одно и то же время в какой-то момент.


если я хорошо понял: пример скрипки, http://jsfiddle.net/gAtTk/ (посмотрите на консоль js)

этот код позволит вам ввести слово « 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()));

Возможно, проще было бы упростить сочетание клавиш?

Как насчет чего-то вроде Shift + Alt + D? (Вероятно, вы не должны использовать клавишу Control, потому что большинство браузеров так или иначе интерпретируют Ctrl + D тем или иным способом)

Код для этого будет примерно таким:

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

Если вам небезразличен порядок, а также нужно удерживать клавишу и нажать другую (например: Shift + DEL, DEL, DEL ...), не поднимая первую клавишу, чтобы снова запустить событие ... Я изменил комментарий @ [BladePlumm], который продлил комментарий @ lu1s на ответ @ ParthThakkar.

Кроме того, использование jQuery's .on () позволяет прослушивать последовательность клавиш только для определенных элементов. Измените «тело» на «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/


У меня есть ответ от TJ Crowder в простой javascript для тех, кто хотел бы избежать 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;
    }
});

Я попробовал три лучших ответа (начиная с этого поста), и никто из них не работал для меня. Они не сбросили ключи .

Если понадобилось 3 ключа, запустите сценарий, после того, как он выстрелил один раз - нажатие любой из трех клавиш запустило бы его снова.

Я просто написал этот скрипт, и он работает очень хорошо. Он использует Shift + S для стрельбы, но вы можете легко изменить это. Он сбрасывается после нажатия комбинации.

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/


Вы можете использовать .on() для привязки функции к нескольким событиям:

$('#element').on('keyup keypress blur change', function(e) {
    // e.type is the type of event fired
});

Или просто передайте функцию в качестве параметра для обычных функций события:

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)




javascript jquery keypress jquery-events