Question

This Javascript which uses functions from jQuery is quite handy but getting feedback on it there is some limitations which I was hoping you guys could help me overcome.

The function basically creates a textbox with a formatted time (HH:MM:SS) so that it is easy for users to enter in times rather than have to use a date time picker which involves lots of clicks.

Code:

//global variable for keeping count on how many times the function is called 
var i = 0;

//for adding formatted time fields
function timemaker()
{

 //creates an input field of text type formatted with a value of "00:00:00"
 var input = $("<input>", 
    {
        name: 'time'+i, // e.g. time0, time1, time2, time3
        value: '00:00:00',
        maxlength: '8',
        size: '6'
    });

    //this function which uses jquery plugin causes the cursor in the field to goto position zero
    //when selected making it easier for the user to enter times and not need to select the correct position
    input.click(function() 
    {

        $(this).prop({
            selectionStart: 0,
            selectionEnd: 0
        });

        //this child function moves the cursor along the text field
        //when it reaches the first ":" it jumps to the next "00"
        }).keydown(function() {

    if (event.keyCode == 9) 
    { 
        return; 
    }

    else
    {
                var sel = $(this).prop('selectionStart'),
                val = $(this).val(),
                newsel = sel === 2 ? 3: sel;
                newsel = sel === 5 ? 6: newsel;

            $(this).val(val.substring(0, newsel) + val.substring(newsel + 1))

            .prop({
                selectionStart: newsel,
                selectionEnd: newsel
            });
    }
});

//this appends the text field to a divved area of the page

input.appendTo(“#events”);
i++;
return;
}

00:00:00

Limitations I need help with

• Say for example you wanted to enter a time of 12:45:00 , you
  obviously don’t need to enter the seconds part (last “00”) as they
  are already there. So you then decide to tab out of that text field
  but the javascript interprets your “Tab” keypress as an entry and
  deletes a zero from the field causing the value to be like 12:45:0
• Does not validate inputs for 24 hour format- do you think it will be
  possible to do that? e.g. first number you enter is “2” therefore the
  only options you have are “0,1,2,3”
• If you make a mistake in the 4th digit and reselect the text field
  you have to enter everything again.

Answer 1

I think the main thing you’re missing that would allow you to implement all those requirements is the argument that jQuery passes to you in your keydown event handler. So, change that line to this:

.keydown(function(event){
    if (event.keyCode == 9) { return; }

    ... the rest of your code ...

and then you can use event.keyCode to identify what was pressed and take actions accordingly. So for example, if event.keyCode == 9 then the user pressed TAB.