Keyboard Interaction

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.