Ответ 1

С простым Javascript самым простым является:

document.onkeypress = function (e) {
    e = e || window.event;
    // use e.keyCode
};

Но с этим вы можете привязать только один обработчик для события.

Кроме того, вы можете использовать следующее, чтобы иметь возможность связать несколько обработчиков с одним и тем же событием:

addEvent(document, "keypress", function (e) {
    e = e || window.event;
    // use e.keyCode
});

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    } else {
        element["on" + eventName] = callback;
    }
}

В любом случае keyCode не является согласованным в разных браузерах, поэтому есть больше, чтобы проверить и выяснить. Обратите внимание на e = e || window.event - обычную проблему с Internet Explorer, помещая событие в window.event вместо передачи его в обратный вызов.

Литература:

• https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/keypress
• https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener

С помощью jQuery:

$(document).on("keypress", function (e) {
    // use e.which
});

Ссылка:

• http://api.jquery.com/on/

Помимо jQuery, являющегося "большой" библиотекой, jQuery действительно помогает с несогласованностью между браузерами, особенно с событиями окна... и это нельзя отрицать. Надеюсь, очевидно, что код jQuery, который я предоставил для вашего примера, намного более элегантен и короче, но выполняет то, что вы хотите, последовательно. Вы должны быть уверены, что e (событие) и e.which (key code, чтобы узнать, какая клавиша была нажата) точны. В простом Javascript это немного сложнее узнать, если вы не сделаете все, что внутренняя библиотека jQuery делает.

Обратите внимание, что существует событие keydown, отличное от keypress. Вы можете узнать о них подробнее: onKeyPress Vs. onKeyUp и onKeyDown

Что касается предложения о том, что использовать, я бы определенно предложил использовать jQuery, если вы хотите изучить структуру. В то же время я бы сказал, что вам следует изучить синтаксис Javascript, методы, функции и способы взаимодействия с DOM. Как только вы поймете, как это работает и что происходит, вы должны быть более комфортно работать с jQuery. Для меня jQuery делает вещи более последовательными и более краткими. В конце концов, это Javascript и обертывает язык.

Другим примером очень полезного jQuery является AJAX. Браузеры несовместимы с тем, как обрабатываются запросы AJAX, поэтому аннотации jQuery позволяют вам не беспокоиться.

Здесь что-то, что может помочь решить:

• http://www.jscripters.com/jquery-disadvantages-and-advantages/

Ответ 2

Keypress
(введитеключ)

Vanilla:

document.addEventListener("keypress", function(event) {
    if (event.keyCode == 13) {
        alert('hi.')
    }
})

Ванильное сокращение:

this.addEventListener('keypress', event => {
    if (event.keyCode == 13) {
        alert('hi.')
    }
})

JQuery:

$(this).on('keypress', function(event) {
    if (event.keyCode == 13) {
        alert('hi.')
    }
})

jQuery классический:

$(this).keypress(function(event) {
    if (event.keyCode == 13) {
        alert('hi.')
    }
})

Сокращение jQuery:

$(this).keypress((e) => {
    if (e.which == 13) {
        alert('hi.')
    }
})

Еще короче:

$(this).keypress(e=>
    e.which==13?
    alert('hi.'):null
)

демо

Ответ 3

Используйте event.key и современный JS!

Нет числовых кодов больше. Вы можете использовать "Enter", "ArrowLeft", "r" или любое другое имя ключа, что сделает ваш код более читабельным.

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "ArrowLeft") {
        // Move Left
    }
    else if (event.key === "Enter") {
        // Open Menu...
    }
});

Документы Mozilla

Поддерживаемые браузеры

Ответ 4

Есть несколько способов справиться с этим; Ванильный JavaScript может сделать это довольно хорошо:

function code(e) {
    e = e || window.event;
    return(e.keyCode || e.which);
}
window.onload = function(){
    document.onkeypress = function(e){
        var key = code(e);
        // do something with key
    };
};

Или более структурированный способ его обработки:

(function(d){
    var modern = (d.addEventListener), event = function(obj, evt, fn){
        if(modern) {
            obj.addEventListener(evt, fn, false);
        } else {
            obj.attachEvent("on" + evt, fn);
        }
    }, code = function(e){
        e = e || window.event;
        return(e.keyCode || e.which);
    }, init = function(){
        event(d, "keypress", function(e){
            var key = code(e);
            // do stuff with key here
        });
    };
    if(modern) {
        d.addEventListener("DOMContentLoaded", init, false);
    } else {
        d.attachEvent("onreadystatechange", function(){
            if(d.readyState === "complete") {
                init();
            }
        });
    }
})(document);