All docs
V21.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Keyboard Support

An end user can use the following keys to interact with the UI component.

Key Action
Alt + ↓ Opens the drop-down list.
Alt + ↑ Closes the drop-down list.
Esc Closes the drop-down list and removes focus from the UI component.
↑ / ↓ Moves focus to the previous/next item. Active only when the drop-down list is open.
Page Up / Page Down Moves focus to the first/last currently rendered item.
Enter or Space Selects the current item.
Backspace Unselects the last selected item.
← / → Focuses the previous/following tag.
Backspace / Delete Removes focused tag.

You can implement a custom handler for a key using the registerKeyHandler(key, handler) method.

jQuery
JavaScript
function registerKeyHandlers () {
    const tagBox = $("#tagBoxContainer").dxTagBox("instance");
    tagBox.registerKeyHandler("backspace", function(e) {
        // The argument "e" contains information on the event
    });
    tagBox.registerKeyHandler("space", function(e) {
        // ...
    });
}
Angular
TypeScript
import { ..., ViewChild, AfterViewInit } from '@angular/core';
import { DxTagBoxModule, DxTagBoxComponent } from 'devextreme-angular';
// ...
export class AppComponent implements AfterViewInit {
    @ViewChild(DxTagBoxComponent, { static: false }) tagBox: DxTagBoxComponent;
    // Prior to Angular 8
    // @ViewChild(DxTagBoxComponent) tagBox: DxTagBoxComponent;

    ngAfterViewInit () {
        this.tagBox.instance.registerKeyHandler('backspace', function(e) {
            // The argument "e" contains information on the event
        });
        this.tagBox.instance.registerKeyHandler('space', function(e) {
            // ...
        });
    }
}
@NgModule({
    imports: [
        // ...
        DxTagBoxModule
    ],
    // ...
})
Vue
<template>
    <DxTagBox :ref="myTagBoxRef" />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxTagBox from 'devextreme-vue/tag-box';

const myTagBoxRef = 'my-tag-box';

export default {
    components: {
        DxTagBox
    },
    data() {
        return {
            myTagBoxRef
        }
    },
    computed: {
        tagBox: function() {
            return this.$refs[myTagBoxRef].instance;
        }
    },
    mounted: function() {
        this.tagBox.registerKeyHandler('backspace', function(e) {
            // The argument "e" contains information on the event
        });
        this.tagBox.registerKeyHandler('space', function(e) {
            // ...
        });
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { TagBox } from 'devextreme-react/tag-box';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.tagBoxRef = React.createRef();
    }

    render() {
        return (
            <TagBox ref={this.tagBoxRef} />
        );
    }

    get tagBox() {
        return this.tagBoxRef.current.instance;
    }

    componentDidMount() {
        this.tagBox.registerKeyHandler('backspace', function(e) {
            // The argument "e" contains information on the event
        });
        this.tagBox.registerKeyHandler('space', function(e) {
            // ...
        });
    }
}

export default App;
See Also