Keyboard Interaction

17 Jun 20161 minute to read

You can use keyboard shortcut keys as an alternative to the mouse while using the ColorPicker control. The ColorPicker control allows you to perform all kinds of actions by using keyboard shortcuts.

Keyboard shortcut keys

Shortcut Key	Description
Alt + j	Focuses into the ColorPicker control
Alt + Down	Open / Close the Popup
Up	Increase the brightness value
Down	Decrease the brightness value
Right	Increase the saturation value
Left	Decrease the saturation value
Enter	Choose the current color
Esc	Closes the popup
Tab	Choose the next element
Home	Downwards to value 0
End	Upwards to value 100

Configure Keyboard Interaction

The following steps explain how you can enable keyboard interaction for the ColorPicker textbox.

Add the following code example to the corresponding ASPX page to render the ColorPicker control and enable keyboard interaction by the access key property.

HTML

<ej:ColorPicker runat="server" ID="colorpicker" Value="#278787"></ej:ColorPicker>

Add the following code in the script section.

JS

jQuery(function ($)

        {

            $(document).on("keydown", function (e)

            {

                if (e.altKey && e.keyCode === 74)

                { // j- key code.

                    $("#<%=colorpicker.ClientID%>Wrapper").focus();

                }

            });

        });

The following screenshot displays the output of the above code snippet.