Help me improve this Javascript codes limitations?

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.

---

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.

---

This is a slightly out-of-the-box solution, but you might consider it if things don't work out with your filtered textbox:

http://jsfiddle.net/YLcYS/4/