Определить клавишу переключения в угловых 5

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

Вы можете попробовать с хост-слушателем в вашем компоненте.

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

Answer 2

Вы можете прослушивать событие нажатия клавиши Shift напрямую с помощью прослушивателя событий (keydown.shift).

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

Демонстрация в реальном времени

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

Использование Угловые псевдо-события

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

Пример Stackblitz

Answer 5

Попробуйте приведенный ниже способ shift *

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