Keyboard Interaction
13 Jun 20231 minute to read
With the keyboard navigation enabled in the PercentageTextBox control, it is possible to control the actions with the provided shortcut keys. Almost all the PercentageTextBox functionality that are done through mouse can be controlled with shortcut keys.
The various keyboard shortcuts available within the PercentageTextBox control are discussed in the following table.
| Shortcut Key | Description |
|---|---|
| + 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 PercentageTextBox.
In the View page add PercentageTextBox helper. Set the access key property to the PercentageTextBox 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.
@{IDictionary<string, object> percentAttribute = new Dictionary<string, object>();
percentAttribute.Add("accesskey", "k");
}
@Html.EJ().PercentageTextbox("percentage").Name("percent").Value("22").HtmlAttributes(percentAttribute)Run the above example and press Access key + j key to focus the PercentageTextBox widget. Perform provided functionality by using keyboard shortcuts.
