Keyboard Interaction

With the keyboard navigation enabled in the NumericTextBox control, it is possible to control the actions of the NumericTextBox with the provided shortcut keys. Almost all the NumericTextBox actions that are done through mouse can be controlled with shortcut keys.

The various keyboard shortcuts available within the NumericTextBox control are discussed in the following table.

Keyboard Shortcuts

Shortcut Key Description
Access key + j Focuses the control
Up Increments the value
Down Decrements the value
Tab Focus the next element

Configuring Keyboard Navigation

The following steps explain the implementation of keyboard interaction in NumericTextBox .

In the HTML page set the corresponding <input> elements for rendering NumericTextBox controls. Set the access key property to the NumericTextBox control for focusing the control while key is pressed.

  • html
  • <input id="numeric" type="text" ej-numerictextbox [value]="value"/>
  • html
  • import { Component } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: 'src/numerictextbox/numerictextbox.component.html'
    })
    export class NumericTextboxComponent { 
        public value: number;
        constructor() {
            this.value = 11;
        }
    }

    Run the above example and press Access key + j key to focus the NumericTextBox widget. Perform provided functionality by using keyboard shortcuts.