listen for specific keystrokes

[jedierikb]

Researching using this widget as part of a larger timecode editing widget (e.g. 10:23:43.505 would be ten hours, twenty-three minutes, forty-three seconds and 505 milliseconds). I would use three of your widgets (for hours, minutes, and seconds inputs) and use textnodes for the colons between the hours and minutes inputs.

When the user is focused on the hour field and hit ":", I want to change focus to the minutes field. Suggestions for how to handle this case? It looks like your plugin does not provide a hook for this use case (which would be completely understandable). Just looking for guidance.

[EmKayDK]

I think it will be possible to hook up to keyup or keydown and then check if the key pressed is colon. If it is, you can shift focus to the appropriate field. I am not sure, however, but I will investigate and return with a solution as soon as possible.

[EmKayDK]

Hi jedierikb!

I have found a solution to your issue!

Insert this snippet (and change the two ID's of the text fields to the relevant ID's in your widget):

$('#txtHour').on('keyup', function(e) {
    if (e.keyCode === 190 && e.shiftKey === true) {
        $('#txtMinute').focus();
    }
});

The effect is that if you release the period (dot) key and have the shift key pressed at the same time, the focus will be transferred to the next field.

I found that another snippet that could be relevant for you is this:

$('#txtHour').on('focus', function(e) {
    $('#txtHour').select();
});

The effect of this is that when you focus on a field, all the text in the field will be selected; ready to be overwritten by a new value. Maybe you should also consider having a check in the keyup event if the value of the field is two characters long. Already by then you can transfer the focus to the next field and save your user the trouble of even trying to type in the colon.