检测角度5中的换档键

时间:2018-10-12 11:48:54

标签: angular angularjs-directive

我有问题。我试图检测是否按下了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");
      }
    }

5 个答案:

答案 0 :(得分:2)

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

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

Live demo

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

从模板传递到$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

答案 3 :(得分:0)

使用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

答案 4 :(得分:0)

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

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