Как предотвратить событие табуляции в Angular? - PullRequest
Новая
       13

Как предотвратить событие табуляции в Angular?

2 голосов
/ 17 апреля 2019

Я хочу использовать клавишу табуляции для выполнения некоторой логики, но на самом деле не менять фокус. Согласно комментариям этого ответа я могу использовать false в моей разметке или protectDefault () в методе. У меня обоих так. 

onKey(event: KeyboardEvent) { 
  event.preventDefault();
  if(event.key = "Tab") { this.update.emit(this.config); }
}

<input #input
   title="{{config|json}}"
   value="{{config.value}}"
   (keyup)="onKey($event)"
   (keydown.Tab)="onKey($event);false;">

Тем не менее, он получает дополнительный прыжок, когда я нажимаю клавишу Tab. Когда я попробовал ту же логику, но на основе других клавиш (например, « a » или « enter »), поведение было ожидаемым, поэтому я пришел к выводу, что логика верна. По какой-то причине, вкладка неуправляема и распространяет событие так, как будто я хочу дважды вкладывать.

Я неправильно обращаюсь с клавишей табуляции? Не уверен, что гуглить за исключением того, что у меня уже есть.

Ответы [ 2 ]

1 голос
/ 17 апреля 2019

Выписка из стекаблица: https://stackblitz.com/edit/angular-gbuwma?embed=1&file=src/app/app.component.ts

ts 

import { Component, ViewChild, ElementRef,ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private changeDetector: ChangeDetectorRef) { }


  @ViewChild("input2") input2: ElementRef;

  onKey(event: KeyboardEvent) {
    event.preventDefault();
    if (event.key === "Tab") {
        console.log('ole... tab');
        this.input2.nativeElement.value = "aha";
        this.changeDetector.detectChanges();
        this.input2.nativeElement.focus();
    }

  }

}

html 

<input #input
   title=""
   value=""
   (keydown.Tab)="onKey($event);false;">
 - - - 
   <input #input2
   title=""
   value=""
   (keydown.Tab)="onKey($event);false;">
0 голосов
/ 17 апреля 2019

Попробуйте использовать этот код: 

import { HostListener } from '@angular/core';

@HostListener('document:keydown.tab', ['$event'])
onKeydownHandler(event: KeyboardEvent) {
    event.preventDefault();
}
...