以角度监听关键事件

Question

我有一个表，我想添加一个函数，该函数将由向下箭头触发并导致下一行被选中。所以我想在任何地方都有一个向下箭头来触发组件中的功能。我不关心我知道如何在函数中执行此操作的选择，这只是我的特定用例。我只是想知道当用户在组件或页面的任何位置使用向下箭头时，我如何运行函数？

我知道如何在输入上执行此操作，但我可以将其绑定到页面或组件，以便靠近桌子的按键触发事件吗？

Answer 1

您将从 HostListener 装饰器获得 keyup 事件。对于每个 keyup 事件，都有一个与该事件关联的 keycode。您可以使用该 keycode 来区分其他键的所有键事件中的向下箭头键按下。

export class AppComponent {
  @HostListener('window:keyup', ['$event'])
  keyEvent(event: KeyboardEvent) {
    if(event.keyCode == KEY_CODE.DOWN_ARROW){
      // Your row selection code
      console.log(event);
    }
  }
}

export enum KEY_CODE {
    UP_ARROW = 38,
    DOWN_ARROW = 40,
    RIGHT_ARROW = 39,
    LEFT_ARROW = 37
}

在显示表格的组件中使用上述代码。我使用 AppComponent 只是为了演示

Answer 2

event.keyCode 已被弃用

您可以改用 event.key

    @HostListener('window:keyup', ['$event'])
  keyEvent(event: KeyboardEvent) {
    if(event.key == 'ArrowDown'){
      // Your row selection code
      console.log(event.key);
    }
  }

Answer 3

        var key = e.keyCode;
        if(key === 8){ /* If backspace is pressed*/
          if(this.value.length === 3 || this.value.length === 6){
            /*if next char to be removed is /' remove last two characters from input value*/
            this.value = this.value.substr(0, this.value.length-1);
          }
          /*remove last character*/
          this.value = this.value.substr(0, this.value.length);
        }
        /*if key pressed is not number or input got date*/
        else if( !((key > 47 && key < 58) || (key > 95 && key < 106)) 
              || this.value.length === 10){
          e.preventDefault(); //no nothing
        }
      });

      function autoSlash(veiwvalue){
        if(veiwvalue.length === 2 || veiwvalue.length === 5){
          veiwvalue += '/';
        }
        ngModelController.$setViewValue(veiwvalue);
        ngModelController.$render(); //change DOM
        if(veiwvalue.length === 10){
          return veiwvalue;
        }
      }