Keyboard Interaction

13 Oct 20171 minute to read

You can use keyboard shortcut keys as an alternative to the mouse while using the ColorPicker widget. The ColorPicker widget allows you to perform all kinds of actions 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 ColorPicker textbox.

  1. In the CSHTML page, configure the ColorPicker widget and enable keyboard interaction by the access key property.
/*ej-Tag Helper code to render ColorPicker*/

@*In the CSHTML page, add the Html helpers to render ColorPicker widget and enable keyboard interaction by the accesskey property*@
 <ej-color-picker id="colorPicker" value="#278787"> </ej-color-picker>
<script> 
   jQuery(function ($) {
   $(document).on("keydown", function (e) { 
		if (e.altKey && e.keyCode === 74) { // j- key code.    
			$("#colorPickerWrapper").focus();       
		}   
	});
  });
</script>
  • CSHTML
    • /*Razor code to render ColorPicker*/

	@{Html.EJ().ColorPicker("colorPicker).Value("#278787").Render();}

    NOTE

    To render the ColorPicker Control you can use either Razor or Tag helper code as given in the above code snippet.

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

    ColorPicker with Keyboard Navigation