DevExtreme React - Handle the Keyboard Events
The TextArea raises four keyboard events: keyDown, keyPress, 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 widget, assign them to the respective widget options.
jQuery
$(function() { $("#textAreaContainer").dxTextArea({ onKeyDown: function (e) { const keyCode = e.event.key; // Event handling commands go here }, onKeyPress: function (e) { const keyCode = e.event.key; // Event handling commands go here }, onKeyUp: function (e) { const keyCode = e.event.key; // Event handling commands go here }, onEnterKey: function (e) { // Event handling commands go here } }); });
Angular
<dx-text-area (onKeyDown)="onKeyDown($event)" (onKeyPress)="onKeyPress($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 } onKeyPress (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 ], // ... })
Vue
<template> <DxTextArea @key-down="onKeyDown" @key-press="onKeyPress" @key-up="onKeyUp" @enter-key="onEnterKey" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxTextArea } from 'devextreme-vue/text-area'; export default { components: { DxTextArea }, methods: { onKeyDown(e) { const keyCode = e.event.key; // Event handling commands go here }, onKeyPress(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 } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { TextArea } from 'devextreme-react/text-area'; class App extends React.Component { render() { return ( <TextArea onKeyDown={this.onKeyDown} onKeyPress={this.onKeyPress} onKeyUp={this.onKeyUp} onEnterKey={this.onEnterKey} /> ); } onKeyDown(e) { const keyCode = e.event.key; // Event handling commands go here } onKeyPress(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 } } export default App;
If you are going to change the handling functions at runtime, or if you need to attach several functions to a single event, use the on(eventName, eventHandler) method. This approach is more typical of jQuery.
const keyDownHandler1 = function (e) { const keyCode = e.event.key; // First handler of the "keyDown" event }; const keyDownHandler2 = function (e) { const keyCode = e.event.key; // Second handler of the "keyDown" event }; $("#textAreaContainer").dxTextArea("instance") .on("keyDown", keyDownHandler1) .on("keyDown", keyDownHandler2);
You can implement a custom handler for a key using the registerKeyHandler(key, handler) method.
jQuery
function registerKeyHandlers () { const textArea = $("#textAreaContainer").dxTextArea("instance"); textArea.registerKeyHandler("backspace", function(e) { // The argument "e" contains information on the event }); textArea.registerKeyHandler("space", function(e) { // ... }); }
Angular
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 ], // ... })
Vue
<template> <DxTextArea :ref="myTextAreaRef" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DxTextArea from 'devextreme-vue/text-area'; const myTextAreaRef = 'my-text-area'; export default { components: { DxTextArea }, data() { return { myTextAreaRef } }, computed: { textArea: function() { return this.$refs[myTextAreaRef].instance; } }, mounted: function() { this.textArea.registerKeyHandler('backspace', function(e) { // The argument "e" contains information on the event }); this.textArea.registerKeyHandler('space', function(e) { // ... }); } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { TextArea } from 'devextreme-react/text-area'; class App extends React.Component { constructor(props) { super(props); this.textAreaRef = React.createRef(); } render() { return ( <TextArea ref={this.textAreaRef} /> ); } get textArea() { return this.textAreaRef.current.instance; } componentDidMount() { this.textArea.registerKeyHandler('backspace', function(e) { // The argument "e" contains information on the event }); this.textArea.registerKeyHandler('space', function(e) { // ... }); } } export default App;
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- TextArea - Handle the Value Change Event
- TextArea Demos
If you have technical questions, please create a support ticket in the DevExpress Support Center.