Angular TextArea - Handle the Keyboard Events
The TextArea raises four keyboard events: keyDown, keyUp and enterKey. Within the functions that handle them, you can access the original keyboard events. If you are not going to change the functions during the lifetime of the UI component, assign them to the 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
- ],
- // ...
- })
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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.