使用html按钮按箭头键或直接按

Question

I want to press an arrow key using an html button. I have so far found only trigger or simulate events.

Like in jquery we have a .click() to have a mouse click, similarly I am trying to have a arrowUp() similarly for all arrow keys. I am ultimately trying to implement this in an angular app.

Please help.

UPDATE

Need to fire an up arrow key or F1 key event like the .click(), using typescript/javascript.

If an F1 key event is fired it should open up some kind of windows help tab. So in a page if an up or down arrow key is fired, the page should scroll up or down accordingly.

Answer 1

In Angular you need to bind the html button to a variable using ViewChild

<button #myButton>

And in the controller

@ViewChild('myButton')
myButton: ElementRef;

Then you can call the event

const event = new KeyboardEvent('keydown',{ 'which': '40'}); //down
this.myButton.nativeElement.dispatchEvent(event);

You can use the different keycodes for the arrows:

37-left 38-up 39-right 40-down

Working fiddle: https://jsfiddle.net/pwmcfgkn/4/

Answer 2

Angular has a built in key listener event handler like here , but it seems limited to just several keys like Enter, Shift Control as described in the Github Page

However, you can use HTML's robust key event handler like

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Do nothing if the event was already processed
  }

  switch (event.key) {
    case "Down": // IE/Edge specific value
    case "ArrowDown":
      // Do something for "down arrow" key press.
      break;
    case "Up": // IE/Edge specific value
    case "ArrowUp":
      // Do something for "up arrow" key press.
      break;

    default:
      return; // Quit when this doesn't handle the key event.
  }

  // Cancel the default action to avoid it being handled twice
  event.preventDefault();
}, true);

This example can be found here , and the full list of keys, including arrow keys here