Question

我有问题。我试图检测是否按下了Shift键。这是我尝试过但无法与我合作的

html：

<input
  type="text" 
  class="form-control" 
  dir="rtl" 
  (input)="shiftkey($event)" 
  #myInput>

ts：

    @ViewChild('myInput', {
      read: ElementRef
    })
    txt: ElementRef;
    ...
    shiftkey(event) {

 if (this.txt.nativeElement.value.toUpperCase() === 
 this.txt.nativeElement.value && this.txt.nativeElement.value.toLowerCase() 
 !== this.txt.nativeElement.value && !event.shiftKey)
   {
        console.log("test shift key");
      }
    }

Answer 1

您可以使用(keydown.shift)事件监听器直接收听shift keydown事件。

@Component({
  selector: 'my-app',
  template: `
  <input (keydown.shift)="onShift()" />
  `
})
export class AppComponent  {
  onShift() {
    console.log('shift pressed!');
  }
}

Live demo

Answer 2

在您的 shiftkey 方法中尝试以下波纹管

shiftkey(event) {
  if(event.shiftKey) {
    console.log("test shift key");
  } 
}

Answer 3

从模板传递到$event函数的

shiftkey上已经有一个shirtKey字段。只需检查一下即可。

因此，您实际上不需要名为#myInput的模板变量

赞：

shiftkey(event) {
  if (event.shiftKey) {
    console.log("test shift key");
  }
}

您必须将此绑定到模板中的(keyup)="shiftkey($event)"。

因此，请对模板进行以下更改：

<input 
  type="text" 
  class="form-control" 
  dir="rtl" 
  (keyup)="shiftkey($event)"
  (keydown)="shiftkey($event)">

一旦您按下Shift键输入任何内容，您将获得日志。

如果要检查是否仅按下了(keydown)="shiftkey($event)"键，也可以使用shift。

这是您推荐的StackBlitz。

Answer 4

使用Angular Pseudo-Events

<input (keyup.enter)='...responds to enter...' />
<input (keydown.esc)='...responds to escape...' />
<input (keyup.shift.f)='...responds to shift+f...' />

Stackblitz Example

Answer 5

您可以在组件中尝试使用主机侦听器。

@HostListener('keydown', ['$event']) onKeyDown(e) {
    if (e.shiftKey ) {
      console.log('shift key pressed.');
    }
  }
}

检测角度5中的换档键

5 个答案: