DevExtreme jQuery/JS - 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 jQuery keyboard events. If you are not going to change the functions during the lifetime of the widget, assign them to the respective widget options.
$(function() { $("#textAreaContainer").dxTextArea({ onKeyDown: function (e) { var keyCode = e.jQueryEvent.which; // Event handling commands go here }, onKeyPress: function (e) { var keyCode = e.jQueryEvent.which; // Event handling commands go here }, onKeyUp: function (e) { var keyCode = e.jQueryEvent.which; // 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.
var keyDownHandler1 = function (e) { var keyCode = e.jQueryEvent.which; // First handler of the "keyDown" event }; var keyDownHandler2 = function (e) { var keyCode = e.jQueryEvent.which; // Second handler of the "keyDown" event }; $("#textAreaContainer").dxTextArea("instance") .on("keyDown", keyDownHandler1) .on("keyDown", keyDownHandler2);
You can also implement handlers for other keys using the registerKeyHandler(key, handler) method.
jQuery
function registerKeyHandlers () { let 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) 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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- TextArea - Handle the Value Change Event
- TextArea Demos
If you have technical questions, please create a support ticket in the DevExpress Support Center.