Які варіанти (клавіатури) в Angular2?


82

Наступне чудово працює, коли клавішу введення відпущено. Які ще варіанти доступні для keyupдодатково keyup.enter?

<input #inputstring (keyup.enter)="doSomething(inputstring.value)"/>

Можливо, це може дати вам підказку github.com/angular/angular/issues/523 , хоча вона досить стара.
Ерік Мартінес

Відповіді:


57

Це параметри, зафіксовані в даний час в тестах: ctrl, shift, enter і escape. Ось кілька валідних прикладів прив’язки ключів:

keydown.control.shift.enter
keydown.control.esc

Ви можете відстежити це тут, поки офіційних документів не існує, але вони мають вийти найближчим часом.


5
Ого, ця відповідь була дана, коли Angular був у своїй 20-ій альфа-версії, і вона працює і сьогодні.
JP ten Berge



23

Я шукав спосіб прив’язки до кількох ключових подій - зокрема, Shift + Enter - але не зміг знайти хороших ресурсів в Інтернеті. Але після реєстрації прив'язки клавіатури

<textarea (keydown)=onKeydownEvent($event)></textarea>

Я виявив, що подія клавіатури надавала всю інформацію, необхідну мені для виявлення Shift + Enter. Виявляється, $eventповертається досить детальний KeyboardEvent .

onKeydownEvent(event: KeyboardEvent): void {
   if (event.keyCode === 13 && event.shiftKey) {
       // On 'Shift+Enter' do this...
   }
}

Також є прапори для CtrlKey, AltKey та MetaKey (тобто клавіша Command на Mac).

Немає потреби в KeyEventsPlugin, JQuery або чистому прив'язуванні JS.



13

Втратили ту саму проблему сьогодні.

Вони погано задокументовані, відкрите питання існує.

Деякі для клавіатури , наприклад пробіл:

<input (keyup.space)="doSomething()">
<input (keyup.spacebar)="doSomething()">  

Деякі для клавіатури
(може працювати і для клавіатури):

<input (keydown.enter)="...">
<input (keydown.a)="...">
<input (keydown.esc)="...">
<input (keydown.alt)="...">
<input (keydown.shift.esc)="...">
<input (keydown.shift.arrowdown)="...">
<input (keydown.f4)="...">

Все вище є посиланнями нижче:

https://github.com/angular/angular/issues/18870
https://github.com/angular/angular/issues/8273
https://github.com/angular/angular/blob/master/packages/platform- browser / src / dom / events / key_events.ts
https://alligator.io/angular/binding-keyup-keydown-events/


11

Ви можете додати подію клавіатури, як це

template: `
  <input (keyup)="onKey($event)">
  <p>{{values}}</p>
`

у Component кодуйте деякі, як показано нижче

export class KeyUpComponent_v1 {
  values = '';

  onKey(event:any) { // without type info
    this.values += event.target.value + ' | ';
  }
}

1
Це не працює для чисел. Подія клавіатури не запускається, якщо я введу номер у полі введення. Що ми можемо для цього зробити?
моніка

2

Якщо KeyUp подія знаходиться за межами CTRL, SHIFT, ENTERі ESCкронштейн, використовуйте тільки керівництво @Md Аюб Алі Саркер в. Єдина псевдо-подія підключення, згадана тут у кутових документах https://angular.io/docs/ts/latest/guide/user-input.html, є ENTERключовою. Ще немає псевдо-подій клавіатури для цифрових клавіш та алфавітів.


Вибач, Роберте. У мене не виникло проблем з переходом до документів Angular за допомогою посилання. Це працює.
Benny64

Так, це працює зараз. Можливо, питання було на моєму боці. Вибачте.
Роберт,

1

Ви keyCodeзастаріли, ви можете використовувати keyвластивість уKeyboardEvent

<textarea (keydown)=onKeydownEvent($event)></textarea>

Машинопис:

onKeydownEvent($event: KeyboardEvent){

    // you can use the following for checkig enter key pressed or not
    if ($event.key === 'Enter') {
      console.log($event.key); // Enter
    }


    if ($event.key === 'Enter' && event.shiftKey) {
           //This is 'Shift+Enter' 
    }
}

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.