My jquery function time formatting problem?

Hello I have a jquery function called "create time box"

This creates a textbox with a format of "HH:MM:SS". When the user selects this input box:

The selection goes to 0 (starting point) and the user can enter the hours.

Once the user enters the hours part the function jumps the selection point to position 3 after the ":" , however It does not do this after you complete the "MM" part. How do I make it do that? Thanks

Also how can I limit the textbox so that after the user completes the "SS" seconds part they cannot enter anymore?

Try it for yourself here.

http://jsfiddle.net/sArjQ/2/

The code can be found here:

for (var i = 0; i < 1; i++) {
    var input = $("<input>", {
        name: 'time' + i,
        val: '00:00:00'
    });

    input.click(function() {

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

    }).keydown(function() {

        var sel = $(this).prop('selectionStart'),
       开发者_如何学编程     val = $(this).val(),
            newsel = sel === 2 ? 3: sel;
        newsel1= sel === 2 ? 5: sel;

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

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

    $('body').append(input);
}

Thanks

Here you go:

    newsel = sel === 2 ? 3: sel;
    newsel = sel === 5 ? 6: newsel;

http://jsfiddle.net/AlienWebguy/sArjQ/3/

To limit use this;

$("input#video_stream_offset_custom").val(hms.substring(0, 8));