Keyboard Interaction

24 May 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.
@*In the CSHTML page, add the HTMl helpers to render ColorPicker widget and enable keyboard interaction by the access key property*@
@Html.EJ().ColorPicker("colorPicker").Value("#278787")
<script> 
   jQuery(function ($) {
   $(document).on("keydown", function (e) { 
		if (e.altKey && e.keyCode === 74) { // j- key code.    
			$("#colorPickerWrapper").focus();       
		}   
	});
  });
</script>

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

ColorPicker with Keyboard Navigation