Angular TextArea - Handle the Keyboard Events

The TextArea raises three keyboard events: keyDown, keyUp and enterKey. Within functions that handle them, you can access original keyboard events. If you are not going to change functions during the lifetime of the UI component, assign them to respective UI component properties.

HTML
TypeScript
  • <dx-text-area
  • (onKeyDown)="onKeyDown($event)"
  • (onKeyUp)="onKeyUp($event)"
  • (onEnterKey)="onEnterKey($event)">
  • </dx-text-area>
  • import { DxTextAreaModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • onKeyDown (e) {
  • const keyCode = e.event.key;
  • // Event handling commands go here
  • }
  • onKeyUp (e) {
  • const keyCode = e.event.key;
  • // Event handling commands go here
  • }
  • onEnterKey (e) {
  • // Event handling commands go here
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTextAreaModule
  • ],
  • // ...
  • })
NOTE
You can also use the input event. This is not a strictly keyboard event, a mouse action can also change a TextArea input value.

Use the registerKeyHandler(key, handler) method to implement a custom handler for a key.

TypeScript
  • import { ..., ViewChild, AfterViewInit } from '@angular/core';
  • import { DxTextAreaModule, DxTextAreaComponent } from 'devextreme-angular';
  • // ...
  • export class AppComponent implements AfterViewInit {
  • @ViewChild(DxTextAreaComponent, { static: false }) textArea: DxTextAreaComponent;
  • // Prior to Angular 8
  • // @ViewChild(DxTextAreaComponent) textArea: DxTextAreaComponent;
  •  
  • ngAfterViewInit () {
  • this.textArea.instance.registerKeyHandler('backspace', function(e) {
  • // The argument "e" contains information on the event
  • });
  • this.textArea.instance.registerKeyHandler('space', function(e) {
  • // ...
  • });
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTextAreaModule
  • ],
  • // ...
  • })
See Also