Forum Academy Marketplace Showcase Pricing Features

Preventing default key behaviors (space bar)

My goal: Press space bar to pause / play an audio file without affecting the use of space bar in inputs

My first attempted solution: Use Air Keyboard Shortcut (Air Keyboard Shortcut Plugin | Bubble) to detect space bar press and handle it in workflows

However, the plug-in allows all default key behavior. In my case meant that if I pressed the Play button in my app with a mouse click and THEN pressed space, I would double-fire events (once for the default action to press the button that is focused, and another for the plug-in action to press the button).

My final solution: Drop an HTML element in the page and add the following Javascript:

< script >
var ButtonPlay = document.getElementById(‘ButtonPlay’);
window.onkeydown = function(event){
if(event.keyCode === 32 && event.target == document.body) {
event.preventDefault();
ButtonPlay.click();
}
};
< /script >

This limits the page scroll & “click” default functionality of the space bar, while still allowing full functionality in inputs.

Some additional notes:

The element ID is set in the properties of the element you are trying to click.

The event keycode is a default list for Javascript - 32 is space bar, but you could replace this as needed.

And if you want to limit ALL functionality - just remove && event.target == document.body.