Как я могу добавить сочетание клавиш JavaScript к существующей функции JavaScript?

Вот мой код:

function pauseSound() {
    var pauseSound = document.getElementById("backgroundMusic");
    pauseSound.pause(); 
}

Я хотел бы добавить в этот код сочетание клавиш, как я могу это сделать, чтобы функция также выполнялась при нажатии кнопки?

Пытался добавить оператор else if, но он не работает, есть идеи?

function doc_keyUp(e) {
    if (e.ctrlKey && e.keyCode == 88) {
        pauseSound();
    }

    else if (e.ctrlKey && e.keyCode == 84) {
        playSound();
    }
}

person Chris    schedule 24.03.2010    source источник
comment
фактический синтаксис для else-if будет else if (‹условие›) { ‹код›}. убрать дефис.   -  person lincolnk    schedule 25.03.2010


Ответы (8)


Обработчик события keyup документа кажется подходящим решением.

Примечание. KeyboardEvent.keyCode устарел в пользу key.

// define a handler
function doc_keyUp(e) {

    // this would test for whichever key is 40 (down arrow) and the ctrl key at the same time
    if (e.ctrlKey && e.key === 'ArrowDown') {
        // call your function to do the thing
        pauseSound();
    }
}
// register the handler 
document.addEventListener('keyup', doc_keyUp, false);
person lincolnk    schedule 24.03.2010
comment
Это работает очень хорошо, спасибо. Как я могу использовать этот код дважды, потому что мне нужна другая комбинация клавиш для «playSound()»? - person Chris; 25.03.2010
comment
добавьте оператор else-if, аналогичный первому оператору if, но при необходимости измените код клавиши. сделайте оттуда вызов playSound(). если вы хотите использовать одну и ту же клавишу для обоих действий, вам нужно будет настроить переменную флага и проверять/устанавливать ее всякий раз, когда нажимается клавиша, чтобы определить, какое действие предпринять. - person lincolnk; 25.03.2010
comment
А как насчет тех браузеров, которые не поддерживают addEventListener? - person James; 25.03.2010
comment
IE - единственный, с которым я работал, который этого не делает, и вы должны использовать document.attachEvent('onkeyup', doc_keyUp); должно быть много ссылок на них о проверке существования функции перед ее вызовом. - person lincolnk; 25.03.2010
comment
Я попытался добавить else-if, но это не сработало, пожалуйста, обратитесь к сообщению темы, чтобы увидеть обновленный код. - person Chris; 25.03.2010
comment
@Chris: в обработчике событий вы должны добавить var e = e || window.event;, чтобы покрыть конкретный объект события IE. - person Marcel Korpel; 25.03.2010

Если вы ищете только запустить событие после нажатия клавиши, попробуйте следующее:

В этом примере нажмите «ALT + a».

document.onkeyup=function(e){
  var e = e || window.event; // for IE to cover IEs window event-object
  if(e.altKey && e.which == 65) {
    alert('Keyboard shortcut working!');
    return false;
  }
}

Вот скрипка: https://jsfiddle.net/dmtf6n27/38/

Также обратите внимание, что номера кодов клавиш различаются в зависимости от того, используете ли вы onkeypress или onkeyup. Подробнее здесь: свойство keyCode KeyboardEvent школ w3

person mr.mii    schedule 20.02.2016

Я знаю, что опаздываю на вечеринку, но вот мое решение

HTMLElement.prototype.onshortcut = function(shortcut, handler) {
    var currentKeys = []
    
    function reset() {
        currentKeys = []
    }

    function shortcutMatches() {
        currentKeys.sort()
        shortcut.sort()

        return (
            JSON.stringify(currentKeys) ==
            JSON.stringify(shortcut)
        )
    }

    this.onkeydown = function(ev) {
        currentKeys.push(ev.key)

        if (shortcutMatches()) {
            ev.preventDefault()
            reset()
            handler(this)
        }

    }

    this.onkeyup = reset
}


document.body.onshortcut(["Control", "Shift", "P"], el => {
    alert("Hello!")
})

Объяснение

  • Когда вы вызываете мою функцию, она создает массив с именем currentKeys; это клавиши, которые будут удерживаться в данный момент.
  • Каждый раз, когда клавиша нажимается (onkeydown), она добавляется в массив currentKeys.
  • Когда клавиши отпускаются (onkeyup), массив сбрасывается, что означает, что в этот момент никакие клавиши не нажимаются.
  • Каждый раз он будет проверять, соответствует ли ярлык. Если это произойдет, он вызовет обработчик
person Neil    schedule 07.03.2021

Это сработало для меня

document.onkeyup=function(e){
  var e = e || window.event;
  if(e.which == 37) {
    $("#prev").click()
  }else if(e.which == 39){
    $("#next").click()
  }
}
person Wesos de Queso    schedule 08.07.2017

Вот кое-что, что можно использовать, если хотите. Вы можете зарегистрировать связку ключей и обработчик с ним.

Комментарии есть в коде, но вкратце это выглядит так:
Он устанавливает прослушиватель на document и управляет хешем с комбинациями клавиш, которые вы хотите прослушивать.
* Когда вы регистрируете ключ ( комбинация) для прослушивания, вы отправляете код клавиши (предпочтительно в виде константы, взятой из экспортированного свойства «ключ», к которому вы можете добавить больше констант для себя), функцию обработчика и, возможно, хэш параметров, где вы говорите, если ctrl и Ключ /или alt участвует в ваших планах для этого ключа.
* Когда вы отменяете регистрацию ключа (комбинации), вы просто отправляете ключ и необязательный хеш для ctrl/alt-ness.

window.npup = (function keypressListener() {
    // Object to hold keyCode/handler mappings
    var mappings = {};
    // Default options for additional meta keys
    var defaultOptions = {ctrl:false, alt:false};
    // Flag for if we're running checks or not
    var active = false;

    // The function that gets called on keyup.
    // Tries to find a handler to execute
    function driver(event) {
        var keyCode = event.keyCode, ctrl = !!event.ctrlKey, alt = !!event.altKey;
        var key = buildKey(keyCode, ctrl, alt);
        var handler = mappings[key];
        if (handler) {handler(event);}
    }

    // Take the three props and make a string to use as key in the hash
    function buildKey(keyCode, ctrl, alt) {return (keyCode+'_'+ctrl+'_'+alt);}

    function listen(keyCode, handler, options) {
        // Build default options if there are none submitted
        options = options || defaultOptions;
        if (typeof handler!=='function') {throw new Error('Submit a handler for keyCode #'+keyCode+'(ctrl:'+!!options.ctrl+', alt:'+options.alt+')');}
        // Build a key and map handler for the key combination
        var key = buildKey(keyCode, !!options.ctrl, !!options.alt);
        mappings[key] = handler;
    }

    function unListen(keyCode, options) {
        // Build default options if there are none submitted
        options = options || defaultOptions;
        // Build a key and map handler for the key combination
        var key = buildKey(keyCode, !!options.ctrl, !!options.alt);
        // Delete what was found
        delete mappings[key];
    }

    // Rudimentary attempt att cross-browser-ness
    var xb = {
        addEventListener: function (element, eventName, handler) {
            if (element.attachEvent) {element.attachEvent('on'+eventName, handler);}
            else {element.addEventListener(eventName, handler, false);}
        }
        , removeEventListener: function (element, eventName, handler) {
            if (element.attachEvent) {element.detachEvent('on'+eventName, handler);}
            else {element.removeEventListener(eventName, handler, false);}
        }
    };

    function setActive(activate) {
        activate = (typeof activate==='undefined' || !!activate); // true is default
        if (activate===active) {return;} // already in the desired state, do nothing
        var addOrRemove = activate ? 'addEventListener' : 'removeEventListener';
        xb[addOrRemove](document, 'keyup', driver);
        active = activate;
    }

    // Activate on load
    setActive();

    // export API
    return {
        // Add/replace handler for a keycode.
        // Submit keycode, handler function and an optional hash with booleans for properties 'ctrl' and 'alt'
        listen: listen
        // Remove handler for a keycode
        // Submit keycode and an optional hash with booleans for properties 'ctrl' and 'alt'
        , unListen: unListen
        // Turn on or off the whole thing.
        // Submit a boolean. No arg means true
        , setActive: setActive
        // Keycode constants, fill in your own here
        , key : {
            VK_F1 : 112
            , VK_F2: 113
            , VK_A: 65
            , VK_B: 66
            , VK_C: 67
        }
    };
})();

// Small demo of listen and unListen
// Usage:
//   listen(key, handler [,options])
//   unListen(key, [,options])
npup.listen(npup.key.VK_F1, function (event) {
    console.log('F1, adding listener on \'B\'');
    npup.listen(npup.key.VK_B, function (event) {
        console.log('B');
    });
});
npup.listen(npup.key.VK_F2, function (event) {
    console.log('F2, removing listener on \'B\'');
    npup.unListen(npup.key.VK_B);
});
npup.listen(npup.key.VK_A, function (event) {
    console.log('ctrl-A');
}, {ctrl: true});
npup.listen(npup.key.VK_A, function (event) {
    console.log('ctrl-alt-A');
}, {ctrl: true, alt: true});
npup.listen(npup.key.VK_C, function (event) {
    console.log('ctrl-alt-C => It all ends!');
    npup.setActive(false);
}, {ctrl: true, alt: true});

Это не ужасно проверено, но, похоже, работает нормально.

Посмотрите на http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/Javascript-Char-Codes-Key-Codes.aspx, чтобы найти множество кодов клавиш для использования,

person npup    schedule 25.03.2010

Поймайте код клавиши, а затем вызовите свою функцию. Этот пример перехватывает клавишу ESC и вызывает вашу функцию:

function getKey(key) {
    if ( key == null ) {
        keycode = event.keyCode;
    // To Mozilla
    } else {
        keycode = key.keyCode;
    }
    // Return the key in lower case form    
    if (keycode ==27){
        //alert(keycode);
        pauseSound();
        return false;
    }
    //return String.fromCharCode(keycode).toLowerCase();
}
$(document).ready( function (){
    $(document).keydown(function (eventObj){
        //alert("Keydown: The key is: "+getKey(eventObj));
        getKey(eventObj);
    });
});

Для этого примера вам понадобится JQUERY.

person s15199d    schedule 24.03.2010

Похоже, что все они используют устаревшие свойства keyCode и which. Вот неустаревшая версия, использующая jQuery для подключения события:

$("body").on("keyup", function (e) {
    if(e.ctrlKey && e.key == 'x')
        pauseSound();
    else if(e.ctrlKey && e.key == 't')
        playSound();
})

Примечание: ctrl + t уже может быть назначено для открытия новой вкладки браузера.

person xr280xr    schedule 30.05.2018
comment
.key не является устаревшим свойством? - person sam boosalis; 16.05.2019
comment
Похоже, что key является рекомендуемым свойством, хотя оно не поддерживается в Safari: w3schools.com/ jsref/event_key_key.asp - person Blue Raspberry; 09.03.2020

Решение:

var activeKeys = [];

//determine operating system
var os = false;
window.addEventListener('load', function() {
  var userAgent = navigator.appVersion;
  if (userAgent.indexOf("Win") != -1) os = "windows";
  if (userAgent.indexOf("Mac") != -1) os = "osx";
  if (userAgent.indexOf("X11") != -1) os = "unix";
  if (userAgent.indexOf("Linux") != -1) os = "linux";
});

window.addEventListener('keydown', function(e) {
  if (activeKeys.indexOf(e.which) == -1) {
    activeKeys.push(e.which);
  }

  if (os == 'osx') {

  } else {
    //use indexOf function to check for keys being pressed IE
    if (activeKeys.indexOf(17) != -1 && activeKeys.indexOf(86) != -1) {
      console.log('you are trying to paste with control+v keys');
    }
    /*
      the control and v keys (for paste)
      if(activeKeys.indexOf(17) != -1 && activeKeys.indexOf(86) != -1){
        command and v keys are being pressed
      }
    */
  }
});

window.addEventListener('keyup', function(e) {
  var result = activeKeys.indexOf(e.which);
  if (result != -1) {
    activeKeys.splice(result, 1);
  }
});

Объяснение: я столкнулся с той же проблемой и придумал собственное решение. e.metaKey не работает с событием keyup в Chrome и Safari. Однако я не уверен, было ли это специфично для моего приложения, поскольку у меня были другие алгоритмы, блокирующие некоторые ключевые события, и я мог по ошибке заблокировать мета-ключ.

Этот алгоритм отслеживает нажатия клавиш, а затем добавляет их в список нажатых в данный момент клавиш. При отпускании ключ удаляется из списка. Проверьте одновременные ключи в списке, используя indexOf, чтобы найти коды ключей в массиве.

person www139    schedule 14.02.2016