jquery: output pressed key to html

Question

i want to listen for a key stroke, then output the pressed key into every span element inside class=letter element using jquery. at the same time i want to preserve basic functionality of the keyboard shortcuts native to the browser eg. shift + cmd + ]; cmd + r; ctrl + tab etc...

<div class="letter">
<span>a</span>
</div>

this jQuery works very well on detecting and outputing the keystrokes that i am after.

$(window).on("keypress", function (e) {
                var t = e.which || e.keyCode;
                if (e.which === 0 && e.keyCode > 0) return;
                    var n = String.fromCharCode(t);
                    $(".letter").find("span").html(n);

                e.preventDefault();
        });

now i need to exclude somehow the shortcuts but i want to keep the e.preventDefault(); line as it's muting the "wrong button" sound...

letters, numerals, anything accessible from keyboard that can be represented as a glyph. — dyb
– dyb, Commented Apr 5, 2014 at 15:43

Mottie · Accepted Answer · 2014-04-05 15:55:10Z

1

Maybe all you need to do is detect the alt, ctrl and meta keys (demo):

$(window).on("keypress", function (e) {
    var t = e.which || e.keyCode;
    if (e.which === 0 && e.keyCode > 0 || e.altKey || e.ctrlKey || e.metaKey) {
        return;
    }
    var n = String.fromCharCode(t);
    $(".letter").find("span").html(n);
    e.preventDefault();
});

answered Apr 5, 2014 at 15:55

Mottie

86.7k30 gold badges132 silver badges248 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dyb Over a year ago

i wanted to keep the alt functionality for sure so i left only ctrl and meta. works well! thank you!

Collectives™ on Stack Overflow

jquery: output pressed key to html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related