Question

我有桌子，我想添加一个由向下箭头触发的功能，并使下一行被选中。因此，我想在任何地方使用向下箭头来触发组件中的功能。我并不关心我在一个函数中知道如何做的选择，这只是我的特定用例。我只是想知道当用户在组件或页面的任何地方使用向下箭头时如何运行函数？

我看到如何在输入上执行此操作但是我可以将其绑定到页面或组件，以便表格附近的键会触发事件吗？

Answer 1

您将从 HostListener 装饰器中获取keyup事件。对于每个keyup事件，都有一个 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;
        }
      }

以角度收听关键事件

3 个答案: