Keyboard Interaction

12 Jun 20231 minute to read

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

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

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

In the View page add the below code. Set the access key property to the CurrencyTextBox for focusing the control while key is pressed. We need to use ‘HtmlAttributes’ property to add the ”access key” attribute to the Editor elements. ‘HtmlAttributes’ property is used to add HTML attributes like, id, class etc.. to the components. We need to use IDictionary<string,object> to specify the HTML attributes. Please check the below code.

  • @{IDictionary<string, object> currencyAttribute = new Dictionary<string, object>();
    currencyAttribute.Add("accesskey", "j");
    <ej-currency-text-box id="currency" name="currency" value="33" html-attributes="currencyAttribute"/>

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

    CurrencyTextBox focused with keyboard shortcut