Keyboard Interaction

24 Jul 20191 minute to read

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

Shortcut Key Description

Access key

 + j		 Focuses onto the Timepicker control.
Alt + Down Opens/Hides the pop up.
Right/Left Moves to adjacent part.
Up Increments the value.
Down Decrements the value.

When popup is open

Shortcut Key Description
Up Selects the previous time.
Down Selects the next time.
Home/End Moves to the first / last item.
Esc Closes the pop up.

Configure Keyboard Interaction

In the ASPX page, include the following TimePicker control and enable keyboard interaction by setting the access key property.

  • HTML
    • <ej:TimePicker ID="time" runat="server"></ej:TimePicker>
  • JS
    • <script type="text/javascript">
    $(function () {
         $(document).on("keydown", function (e) {
               if (e.altKey && e.keyCode === 74) { // j- key code.
                     $("#<%= time.ClientID %>").focus();
          }
       });
    });
</script>

    Run the code example, press Alt + J to focus on the TimePicker control that enables it and you can navigate by using arrow keys and Esc key to close the pop up.

    Keyboard Interaction