How to prevent default action of space bar except inside inputs?

Question

By default, when we press a space bar key over document it scrolls down. To prevent the default behaviour, we could do the following :

$(document).keypress(function(event) {
   event.preventDefault();
});

But we cannot do the above, when we have certain input fields, for it will not allow us to type into the text fields.

How could I prevent the default action of space bar, without infringing the rights of others!

Your code is also likely to break other things (such as using the tab key to navigate around the page) so you should be more discriminatory about when you prevent the default action (i.e. check it is actually the space bar that was pressed). — Quentin, Mar 17 '15 at 11:54

score 2 · Accepted Answer · answered Mar 17 '15 at 11:51

2

You can either:

Check event.target to see if it is an input element and not prevent default if it is or
Bind event handlers to the input elements which stop propagation

I'd just not break normal scrolling features in the first place though.

answered Mar 17 '15 at 11:51

Quentin

914,110
126
1,211
1,335

I need to pause and play a video from a space bar press. That is the reason I have to break the default behavior – Suhail Gupta Mar 17 '15 at 11:53
1

@SuhailGupta — Normally you'd only do that if the video had the focus – Quentin Mar 17 '15 at 11:53
I need to constantly pause and play the video. I had to bind this event to the document. – Suhail Gupta Mar 17 '15 at 12:02

score 0 · Answer 2 · answered Mar 17 '15 at 11:52

I recently had the same problem. Apparently here is how I solved it:

$(document).keypress(function(event) {
    if (
        ['input', 'textarea', 'select', 'button']
        .indexOf(document.activeElement.tagName.toLowerCase()) == -1
    ) {
        // Current focused element is NOT an input. Let's prevent scroll!
        event.preventDefault();
        // Now we can do various stuff.
    } else {
        // User is typing something into a focused input.
        // Do NOT do anything here.
    }
}

How to prevent default action of space bar except inside inputs?

2 Answers2