Какие есть варианты (keyup) в 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 - но не нашел хороших ресурсов в Интернете. Но после регистрации привязки keydown

<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()">  

Некоторые для keydown
(могут работать и для keyup):

<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- браузер / SRC / dom / events / key_events.ts
https://alligator.io/angular/binding-keyup-keydown-events/


11

вы можете добавить событие keyup, подобное этому

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

в компоненте код, как показано ниже

export class KeyUpComponent_v1 {
  values = '';

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

1
Это не работает с числами. Событие keyup не запускается, если я ввожу число в поле ввода. Что мы можем для этого сделать?
Моника

2

Если KeyUp событие находится за пределами CTRL, SHIFT, ENTERи ESCкронштейн, используйте только руководство @Md Аюб Али Саркер в. Единственное псевдо-событие keyup, упомянутое здесь в angular docs 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.