How do I add a custom keybind to a button on any website?

Question

I am doing annotation work and the web interface is not user friendly at all. I would like to add my own keybinds to buttons like "clear current field" or "switch to a previous field" so I don't have to keep reaching for my mouse every few seconds. Is that possible and how can I do it? I have some HTML background and can identify the element that presses the button on the website, but don't know anything about scripts unfortunately.

It is a third party website. This is how it looks like:

The code for one of the buttons is this:

</button><button onclick="void(0);" class="t-Button " type="button"  id="buttonClearField"><span class="t-Button-label">Clear Field</span></button><button onclick="void(0);" class="t-Button " type="button"  id="btnSaveHeaderFields"><span class="t-Button-label">Save</span></button>

I want to be able to press a specific keybind (for example ctrl+A) instead of clicking on the buttons every time.

I got it going! I used the code from one of the answers here Is it possible to set keyboard shortcuts on a webpage? and it worked. Yay!

Answer 1

The following code will make the key W show an alert saying "UP":

$(document).keypress(function(e){
  if(e.shiftKey && e.keyCode === 87){ // capital W
    alert('UP');
  }
});