Нажатие определенных клавиш для выполнения определенных действий в JavaScript работает в Chrome, но не в Firefox

Question

Я использую 2 функции, чтобы определить, соответствует ли нажатая клавиша тем, что я хочу, и если да, сделайте что-нибудь. Он работает как шарм в Chrome, но ни одна из функций не работает в Firefox. Есть ли способ заставить меня работать там?

document.onkeypress = function() { 
 
    if (event.charCode == 49) { 
 
    alert("You pressed 1!"); 
 
    } 
 
    if (event.charCode == 50) { 
 
    alert("You pressed 2!"); 
 
    } 
 
    if (event.charCode == 51) { 
 
    alert("You pressed 3!"); 
 
    } 
 
    if (event.charCode == 52) { 
 
    alert("You pressed 4!"); 
 
    } 
 
} 
 

 
document.onkeydown = function() { 
 
    if (event.keyCode == 122) { 
 
    alert("You pressed F11!"); 
 
    } 
 
}

<span>Press 1, 2, 3, 4 and F11 to launch different events.</span>

Answer 1

Вы забыли объявить event аргумент. Perhaprs Chrome делает это автоматически. Это работает как browsers-

document.onkeypress = function(event) { 
    if (event.charCode == 49) { 
    alert("You pressed 1!"); 
    } 
    if (event.charCode == 50) { 
    alert("You pressed 2!"); 
    } 
    if (event.charCode == 51) { 
    alert("You pressed 3!"); 
    } 
    if (event.charCode == 52) { 
    alert("You pressed 4!"); 
    } 
} 

document.onkeydown = function(event) { 
    if (event.keyCode == 122) { 
    alert("You pressed F11!"); 
    } 
} 

Answer 2

Главный вопрос в этом коде является то, что вы полагаетесь на глобальный event объект, который не указан в спецификации DOM События и была Microsoft-определенную вещь, что Chrome решил поддержать.

О стандартах, совместимых браузеров, можно использовать addEventListener и принять объект события в качестве аргумента:

document.addEventListener("keypress", function(e) { 
    // .... 
}, false); 

Если вам нужна поддержка IE8 и ранее (или IE9 + в их режиме разбитого «совместимости»), вы нужно attachEvent, который ожидает, что вы использовать глобальный event объект:

document.attachEvent("onkeypress", function() { 
    // .... 
}); 

Итак:

function handler(e) { 
    e = e || window.event; 
    // ... 
} 
if (document.addEventListener) { 
    document.addEventListener("keypress", handler, false); 
} else { 
    document.attachEvent("onkeypress", handler); 
} 

Вторая проблема заключается в том, что charCode устарел; according to MDN, вы должны использовать which для числовых значений или (для печатных символов) char для (односимвольной) строки. Вы можете вернуться к charCode или keyCode для старых браузеров.

Я также использовал switch.

Итак:

function handler(e) { 
 
    e = e || window.event; 
 
    switch (e.which || e.charCode || e.keyCode) { 
 
    case 49: 
 
     snippet.log("You pressed 1"); 
 
     break; 
 
    case 50: 
 
     snippet.log("You pressed 2"); 
 
     break; 
 
    case 51: 
 
     snippet.log("You pressed 3"); 
 
     break; 
 
    case 52: 
 
     snippet.log("You pressed 4"); 
 
     break; 
 
    } 
 
} 
 
if (document.addEventListener) { 
 
    document.addEventListener("keypress", handler, false); 
 
} else { 
 
    document.attachEvent("onkeypress", handler); 
 
}

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>