React 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.

jQuery
JavaScript
$(function() {
    $("#textAreaContainer").dxTextArea({
        onKeyDown: 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
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
     ],
     // ...
 })
Vue
<template>
    <DxTextArea
        @key-down="onKeyDown"
        @key-up="onKeyUp"
        @enter-key="onEnterKey"
    />
</template>

<script>
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
        },
        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.light.css';

import { TextArea } from 'devextreme-react/text-area';

class App extends React.Component {
    render() {
        return (
            <TextArea
                onKeyDown={this.onKeyDown}
                onKeyUp={this.onKeyUp}
                onEnterKey={this.onEnterKey}
            />
        );
    }

    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
    }
}

export default App;
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.
jQuery

If you are going to change handling functions at runtime, or if you need to attach several functions to a single event, use the on(eventName, eventHandler) method.

JavaScript
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);

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

jQuery
JavaScript
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
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
    ],
    // ...
})
Vue
<template>
    <DxTextArea :ref="myTextAreaRef" />
</template>
<script>
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
App.js
import React from 'react';
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
jQuery
Angular
Vue
React
jQuery
Angular
Vue
React