Question

I would like to ask is there something in CSS that features the function as

document.onkeypress = returnKey;

in javascript? Or other keyboard actions listener in CSS?

Answer 1

No there is not, CSS is static styling.

There are pseudo-classes for certain actions such as :hover, :link, :active and :focus etc, but these are element specific.

Your best bet would be to assign keydown handlers, and provide a separate class with your styles, thus mixing JavaScript and CSS to get the effect you desire. In the handler, you can apply the class to the element you desire.

A simple (and rough) jQuery example to emulate something like a :keydown pseudo-class on body would be something like this:

$('body').keydown(function() {
    $(this).addClass('keydown');
}).keyup(function() {
    $(this).removeClass('keydown');
});

.. with a corresponding class like this:

.keydown {
    background-color: red;
}