JavaScript/jQuery 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.

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

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.

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.

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) {
        // ...
    });
}

JavaScript/jQuery TextArea - Handle the Keyboard Events

See Also