Keyboard Interaction

28 Jun 20171 minute to read

With the keyboard navigation enabled in the PercentageTextBox control, it is possible to control the actions of the PercentageTextBox with the provided shortcut keys. Almost all the PercentageTextBox actions 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.

Keyboard Shortcuts

Shortcut Key	Description
Access key + j	Focuses the PercentageTextBox control
Up	Increments the value
Down	Decrements the value

Configuring Keyboard Navigation

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

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

HTML

<table cellpadding="10">
    <tbody>
        <tr>
            <td>
                <label for="percent">Percent</label>
            </td>
            <td>
                <input id="percent" type="text" ej-percentagetextbox e-value="22" accesskey="j" />
            </td>
        </tr>
    </tbody>
</table>

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