Как использовать горячую клавишу для фокусировки редактируемого элемента в angular6? - PullRequest
Новая
       18

Как использовать горячую клавишу для фокусировки редактируемого элемента в angular6?

0 голосов
/ 24 апреля 2018

Я пытался использовать accesskey в Angular 6., но, похоже, он не работает.

Фрагмент HTML-кода компонента: <input id="search_value" accesskey="S">

Может ли кто-нибудь предоставить пример рабочего кода в Angular 6. Спасибо взаранее

Ответы [ 2 ]

0 голосов
/ 24 апреля 2018

Ваш код работает, при условии, что 'S' в нижнем регистре. accesskey имеет разные сочетания клавиш для браузера и ОС: в вашем примере в Windows и Chrome нажатие [Alt] + [s] будет фокусировать элемент.

Если вам нужна другая комбинация клавиш, вам необходимо прослушать нажатие клавиши. Это может быть сделано в простом JS довольно просто, то есть в этом примере.

Тем не менее, «угловой» способ означает это без непосредственного взаимодействия с DOM. Это можно сделать, введя Renderer2 и настроив прослушиватель событий таким образом: 

constructor(private _r: Renderer2) {}

ngOnInit() {
  this._r.listen(document, 'keyup', (event) => {
  if(event.keyCode === 83) {
    // assuming you get a reference to the input element
    this.input.nativeElement.click();
  }
})
}

Еще лучше, с Observables: 

ngOnInit() {
  Observable.fromEvent(document, 'keyup').pipe(
    filter(s => s.keyCode === 83)
  ).subscribe(s => this.doStuff())
}

Это также можно легко включить в директиву.

0 голосов
/ 24 апреля 2018

Насколько я могу судить, не существует способа «Angular Approved» для ручного изменения фокуса элементов. Конечно, вы всегда можете сделать это, обратившись к nativeElement с помощью ElementRef, а затем вызвав метод DOM «.focus ()», но Angular не предоставляет встроенного способа сделать это (они даже удалили функциональность invokeElementMethod, которая была в Renderer от Renderer2). Вы можете привязать атрибут «tabindex» к входу, который, по крайней мере, позволяет вам определить порядок, в котором будет фокусироваться клавиша табуляции, но кроме этого я не думаю, что вы можете изменить фокус с помощью любых разрешенных угловых методов. Чтобы сделать то, что вы спрашиваете, я думаю, вам придется использовать HostListener или какой-либо другой способ настройки прослушивателя keyup / keydown, прослушивать конкретный ключ, который вас интересует, а затем установить фокус вручную, используя DOM '.focus () 'метод.

...